1

我发现这个由AirBnB使用 SASS 构建的灵活的单图像评分小部件。我想用 LESS 创建类似的东西。我知道我可以只写出 CSS，但我想用 LESS 动态地完成它。我的主要问题似乎是动态地将计数器_1...添加_10到类（.filled_1... filled_10）中。这在LESS中可能吗？

这是有效的 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 颗星）

<div class="stars empty">
  <div class="stars filled_9">4.5</div>
</div>
4

2 回答 2

2

就像链接到资源一样简单：http: //blog.thehippo.de/2012/04/programming/do-a-loop-with-less-css

这是资源中的代码示例：

更少的代码：

@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;
}
于 2012-08-09T14:37:20.313 回答
0

Stackoverflow 用户 GnrlBzik 分享了LESS 的循环策略，但结果看起来比我希望的要复杂。这是一个有效的解决方案，对于那些拥有静态数量的星星的人来说仍然看起来很优雅。

@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); }
}
于 2012-08-07T17:56:31.397 回答