“%”在SASS中不被识别为普通文本

Question

我用Sass有点麻烦。我试着做系列的W-*类。例如，我希望“w-87”被识别为“width：87%；”。我的代码如下所示。

@for $i from 0 through 100 {
    .w {
        &-#{$i} {width: #{$i}%;}
    }
}

但“%”符号会导致错误。Stackoverflow是我唯一的希望。请帮帮我。

Answer 1

您可以乘%

  @for $i from 0 through 100 {
    .w {
      &-#{$i} {
        font-size: #{$i * 1%};
      }
    }
  }

Answer 2

%字符保留为占位符选择器（请参阅文档），因此您将需要依赖字符串插值来使用%作为普通字符：

@for $i from 0 through 100 {
    .w {
        &-#{$i} {font-size: #{$i}#{'%'};}
    }
}

然而，这种方法的一个缺点是插值将生成不能用于进一步数学运算的字符串：

Sass有强大的单位算术，你可以用它代替。例如，不是编写#{$width}px，而是编写$width*1px

文档建议您还可以执行算术运算以指定单位：

@for $i from 0 through 100 {
    .w {
        &-#{$i} {font-size: $i * 1%;}
    }
}