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

不确定为什么你需要这么多的课程名称，但你的答案非常接近。您可以使用此略微修改的代码段来获得所需的结果。

@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

我离解决方案很近，我只需要写一个“。”当我有“，”

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

  }

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

sass incremental @loop 0.25,0.50,0.75,1

3 个答案: