SASS for循环输出增量为15

时间:2016-01-26 11:41:21

标签: css sass compass-sass gulp-sass

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

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

2 个答案:

答案 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%
    }
}