Sass增量@loop 0.25,0.50,0.75,1

Question

我需要的是一个从1到100的递增列表：（+0.25）

.width-0_0em  {width: 0em; }
.width-0_25em {width: 0.25em; }
.width-0_50em {width: 0.5em; }
.width-0_75em {width: 0.75em; }
.width-1em    {width: 1em; }
.width-1_25em {width: 1.25em; }
.width-1_50em {width: 1.5em; }
.width-1_75em {width: 1.75em; }
.width-2em    {width: 2em; }

这是我的代码：

$max: 1 * 100;
$step: 1 ;

$zero: 0;
$twentyfive: 1 * 25 ;
$fifteen: 1 * 50 ;
$seventyyfive: 1 * 75 ;

@for $i from $step through ceil($max/$step) {
     $value: ($i - 1) * $step + 0;


      .width-#{$value}_#{$zero}em {
        width: #{$value}em;
      }
      .width-#{$value}_#{$twentyfive}em {
        width: $i * 0.25em;
      }
      .width-#{$value}_#{$fifteen}em {
        width: $i * 0.5em;
      }
      .width-#{$value}_#{$seventyyfive}em {
        width: $i * 0.75em;
      }
      .width-#{$value}em {
        width:($i - 1) * $step + 1em;
      }
  }
}

请问有人能帮我看一下这段代码吗？我不知道哪里出了问题...如果有在fiddle或类似平台上的示例，将不胜感激。

- Bortx

Answer 1

不确定你为什么需要这么多类名，但是你的答案已经非常接近了。你可以使用这个稍微修改过的代码片段来获得你想要的结果。

@for $i from 0 to 100 {
  $step: 25;
  .width-#{$i}em {
    width: #{$i}em;
  }
  .width-#{$i}_#{$step}em {
    width: #{$i + ($step/100)}em;
  }
  .width-#{$i}_#{$step * 2}em {
    width: #{$i + ($step * 2/100)}em;
  }
  .width-#{$i}_#{$step * 3}em {
    width: #{$i + ($step * 3/100)}em;
  }
}

希望这有所帮助。

- Adetoyese Kola-Balogun

---

是的！这正是我想要的解决方案，谢谢！ - Bortx

Answer 2

我离解决方案真的很近了，我只需要在有“,”的时候写一个“。”

  $max: 1 * 100;
    $step: 1 ;

    $twentyfive: 1 * 25 ;
    $fifteen: 1 * 50 ;
    $seventyyfive: 1 * 75 ;

    @for $i from $step through ceil($max/$step) {
         $value: ($i - 1) * $step + 0;

          .width-#{$value}em {
            width:($i - 1) * $step + 0em;
          }
          .width-#{$value}_#{$twentyfive}em {
            width: #{$value},#{$twentyfive}em;
          }
          .width-#{$value}_#{$fifteen}em {
            width: #{$value},#{$fifteen}em;
          }
          .width-#{$value}_#{$seventyyfive}em {
            width: #{$value},#{$seventyyfive}em;
          }

  }

- Bortx

---

为什么你想给每个类都赋一个值的名称？ - Thielicious

是的，之后我想我会有一些“模块化”的类，比如宽度为3em或宽度为5em。 - Bortx

Answer 3

您可以使用nth-child而不是每次命名一个类。

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

SASS

@mixin inc(){
  $step:0.25;
  $max:100;
  @for $i from 1 through ($max/$step){
    $w:$i*$step;
    div:nth-child(#{$i}){
      width:$w+'em';
    }
  }
}
@include inc();

将步骤乘以当前的第N个子元素，就可以了。 FIDDLE

- Thielicious

---

很好，但它没有回答我的问题...（或者我没有理解它） 我想要的宽度增量是：0.25、0.50、0.75、1、1.25、1.50...到100 这个子想法很不错！ - Bortx

我之前误读了你的问题。现在应该可以了，请检查 Fiddle。 - Thielicious