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

有人可以帮我处理这段代码吗？我不知道我做错了什么......任何小提琴或类似的例子都会被欣赏

Answer 1

不知道为什么你想要这么多类名，但你的答案很接近。您可以使用此稍作修改的代码 sn-p 来获得您想要的结果。

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

希望对你有帮助

Answer 2

你可以使用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

Answer 3

我真的很接近解决方案，我只需要写一个“。”当我有“，”时

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

  }