SASS for loop to output increments of 15

Question

I am trying to output the following:

.time15 {
    width: 25%;
}
.time30 {
    width: 50%;
}
.time45 {
    width: 75%;
}
.time60 {
    width: 100%;
}
.time75 {
    width: 125%;
}

All the way up to .time1440

Here is my code:

$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%
    }
}

I'm getting the following syntax error though when trying to compile:

Error: Invalid CSS after "...   &.time{$value": expected ":", was "} {"

Answer 1

The issue is that SCSS can't handle the following line:

width: $value%;

It is safer to do

width: percentage($value);

Apart from that, I think that the interpolation of the selector is also wrong. In my test I changed it to .time-#{$value} and that worked for me.

Full example:

$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

this maybe what you're looking for:

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

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