Setting css properties with SASS and :nth-child -

Setting css properties with SASS and :nth-child -

this question has reply here:

sass 3.3.7 - dynamically create list of icons 4 answers

i have 600 lines of code repeats set background position of image sprite display bunch of images.

#foo-label { background-position: (1 * -96) + px 0; &:hover { background-position: (1 * -96) + px -192px; } } #bar-label { background-position: (2 * -96) + px 0; &:hover { background-position: (2 * -96) + px -192px; } } ...

is possible using sass utilize :nth-child selector determine index of selected element , set background position multiple of index? such as;

#images-parent label:nth-child(index) { background-position: (index * -96) + px 0; &:hover { background-position: (index * -96) + px -192px; } }

i read mixins, cutting code in less half since can this;

@mixin img-position($index) { background-position: ($index * -96) + px -96px; &:hover { background-position: ($index * -96) + px -96px; } } #foo-label { @include img-position(1); }

i still need set each individual label though, still wondering if there's improve solution.

this solution looks using mixins. 600+ lines of code downwards 90.

$unchecked: 0; $checked: -96; $hover: -192; @mixin img-position($index, $state) { background-position: ($index * -96) + px $state + px; &:hover { background-position: ($index * -96) + px ($hover - $state) + px; } } input[type=checkbox], input[type=radio] { &.img-checkbox { position:absolute; left:-3000px; &.checked + #bars-label { @include img-position(0, $checked); } &.checked + #event_spaces-label { @include img-position(1, $checked); } &.checked + #night_clubs-label { @include img-position(2, $checked); } + label { background-image:url('img.jpg'); height: 96px; width: 96px; display: inline-block; padding: 0 0 0 0px; cursor:pointer; &#bars-label { @include img-position(0, $unchecked); } &#event_spaces-label { @include img-position(1, $unchecked); } &#night_clubs-label { @include img-position(2, $unchecked); } } } }

if has improvements or feedback please allow me know!

css sass