我正在尝试输出以下内容:
.time15 {
width: 25%;
}
.time30 {
width: 50%;
}
.time45 {
width: 75%;
}
.time60 {
width: 100%;
}
.time75 {
width: 125%;
}
一直到.time1440
这是我的代码:
$max: 60 * 24;
$step: 15;
@for $i from 15 through ceil($max/$step) {
$value: ($i - 1)*$step + 1;
$width: $value / 60 * 100;
.time{$value} {
width: $value%
}
}
我在尝试编译时遇到以下语法错误:
Error: Invalid CSS after "... &.time{$value": expected ":", was "} {"
答案 0 :(得分:1)
问题是SCSS无法处理以下行:
width: $value%;
更安全
width: percentage($value);
除此之外,我认为选择器的插值也是错误的。
在我的测试中,我将其更改为.time-#{$value}
,这对我有用。
完整示例:
$max: 60 * 24;
$step: 15;
@for $i from $step through ceil($max/$step) {
$value: ($i - 1) * $step + 1;
$width: $value / 60 * 100;
.time-#{$value} {
width: percentage($value);
}
}
答案 1 :(得分:0)
这可能是你在寻找的东西:
$max: 60 * 24;
$step: 15;
@for $i from 1 through ($max/$step) {
$value: $step * $i;
$width: $i * 25;
.time#{$value} {
width: $width + 0%
}
}