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