Question

我正在尝试输出以下内容：

.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 "} {"

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

Answer 2

这可能是你在寻找的东西：

$max: 60 * 24;
$step: 15;

@for $i from 1 through ($max/$step) {
    $value: $step * $i;
    $width: $i * 25;
    .time#{$value} {
        width: $width + 0%
    }
}

SASS for循环输出增量为15

2 个答案: