使用SASS和：nth-​​child设置css属性

Question

我有大约600行代码重复自己设置图像精灵的背景位置以显示一堆图像。

  #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;
    }
  }

...

是否可以使用SASS使用类似：nth-​​child选择器来确定所选元素的索引并将其背景位置设置为该索引的倍数？如;

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

我刚刚读到了关于mixins的内容，因为我现在可以做到这一点，所以会减少不到一半的代码;

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

#foo-label {
  @include img-position(1);
}

我仍然需要为每个单独的标签设置这个，所以仍然想知道是否有更好的解决方案。

Answer 1

这就是我的解决方案使用mixins的样子。 600多行代码，最低为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); }
    }
  }
}

如果有人有任何改进或反馈，请告诉我们！