我想定义像
这样的类.bg-1 {
width: 1%
}
.bg-2 {
width: 2%
}
我正在尝试这个:
@for $i from 1 through 100 {
.bg-#{$i} {
width: #{$i};
}
}
至少编译,但打印出来
.bg-1 {
width: 1;
}
.bg-2 {
width: 2;
}
问题是,如果我添加:
width: #{$i}%;
我得到了:
error sass/screen.scss (Line 294 of sass/modules/_classes.scss: Invalid CSS after " $var: ": expected expression (e.g. 1px, bold), was "%;")
答案 0 :(得分:1)
试试这个解决方案。它有效。
@for $i from 1 through 100 {
.bg-#{$i} {
$percentage: unquote("%");
width: #{$i}$percentage;
}
}
或者这个:
@for $i from 1 through 100 {
.bg-#{$i} {
width: #{$i}unquote("%");
}
}
答案 1 :(得分:1)
或类似的东西,更受欢迎。
@for $i from 1 through 100 {
.bg-#{$i} {
width: round(percentage($i/100)); // Math function
height: #{$i}px; // For px or em just concat
}
}