Html 如何用更少的CSS而不是直接的CSS构建一个灵活的收视率小部件？

我发现这个灵活的，一个图像评级小部件是由SASS构建的。我想用更少的钱创造类似的东西。我知道我可以直接写出CSS，但是我想用更少的代码动态地完成它。我的主要问题似乎是动态添加计数器<代码>\u 10到类（

.filled\u 1

..

filled\u 10

）。用更少的时间就能做到这一点吗

以下是有效的SASS代码：

$starWidth: 44px;
$starOffset: 0 -43px;
$numStars: 5;
$steps: 2;
$total: $numStars * $steps;

@mixin filled($n: 0) {
  width: ($starWidth / $steps) * $n;
}

.stars {
  background: url(/images/sprite.png) repeat-x top left;
  height: 43px;

  &.empty {
    background-position: $starOffset;
    width: $numStars * $starWidth;
  }

  @for $i from 0 through ($total) {
    &.filled_#{$i} { @include filled($i) }
  }
}

在CSS中的代码如下所示：

.stars {
  background: url(/images/sprite.png) repeat-x top left;
  height: 43px; }
  .stars.empty {
    background-position: 0 -43px;
    width: 220px; }
  .stars.filled_0 {
    width: 0px; }
  .stars.filled_1 {
    width: 22px; }
  .stars.filled_2 {
    width: 44px; }
  .stars.filled_3 {
    width: 66px; }
  .stars.filled_4 {
    width: 88px; }
  .stars.filled_5 {
    width: 110px; }
  .stars.filled_5 {
    width: 132px; }
  .stars.filled_7 {
    width: 154px; }
  .stars.filled_8 {
    width: 176px; }
  .stars.filled_9 {
    width: 198px; }
  .stars.filled_10 {
    width: 220px; }

我如何做相同的循环，并包含在LESS而不是CSS中

最终的HTML将如下所示：（其中9将显示4.5颗星）

4.5

Stackoverflow用户GnrlBzik共享了一个，但结果看起来比我希望的更复杂。这是一个可行的解决方案，对于那些拥有大量恒星的人来说，它看起来仍然很优雅

@starWidth: 44px;
@starOffset: 0 -43px;
@numStars: 5;

.starCount(@starSpan: 1) {
    width: (@starWidth / 2) * @starSpan;
}

.stars {

    background: url('/images/sprites/stars.png') repeat-x top left;
    height: 43px;
    display:block;

    &.empty {
        background-position: @starOffset;
        width: (@starWidth * @numStars);
    }

    &.filled_0     { .starCount(0); }
    &.filled_1     { .starCount(1); }
    &.filled_2     { .starCount(2); }
    &.filled_3     { .starCount(3); }
    &.filled_4     { .starCount(4); }
    &.filled_5     { .starCount(5); }
    &.filled_6     { .starCount(6); }
    &.filled_7     { .starCount(7); }
    &.filled_8     { .starCount(8); }
    &.filled_9     { .starCount(9); }
    &.filled_10    { .starCount(10); }
}

---

与链接到资源一样简单：

下面是资源中的代码示例：

更少的代码：

@iterations: 30;

// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index > 0) {

    // create the actual css selector, example will result in
    // .myclass_30, .myclass_28, .... , .myclass_1
    (~".myclass_@{index}") {
        // your resulting css
        my-property: -@index px;
    }

    // next iteration
    .loopingClass(@index - 1);
}

// end the loop when index is 0
.loopingClass (0) {}

// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);

结果CSS：

.myclass_30 {
  my-property: -30 px;
}
.myclass_29 {
  my-property: -29 px;
}

.......
.......
.......

.myclass_1 {
  my-property: .1 px;
}

---

这里是参考资料的链接：谢谢。看起来循环比粘贴在列表中要复杂得多。也许在这种情况下，高效的代码不如复制粘贴那么漂亮。我想如果我的循环需要灵活的话，我必须在这里走得更远，但事实上，我对结果很满意。再次感谢.np，这很有意义，因为当您有10个甚至30个项目时，很高兴知道如何使用：）

.myclass_30 {
  my-property: -30 px;
}
.myclass_29 {
  my-property: -29 px;
}

.......
.......
.......

.myclass_1 {
  my-property: .1 px;
}