SASS for循环输出增量为15 [重复]答案

【问题标题】：SASS for loop to output increments of 15 [duplicate]SASS for循环输出增量为15 [重复]
【发布时间】：2016-05-02 23:15:32
【问题描述】：

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

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

【问题讨论】：

标签： css sass compass-sass gulp-sass

【解决方案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);
    }
}

【讨论】：

【解决方案2】：

这可能是您正在寻找的：

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

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

【讨论】：