SASS for 循环输出增量为 15

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

SASS for loop to output increments of 15

css

sass

compass-sass

gulp-sass