SCSS for循環與奇怪的語法工作，但得到語法錯誤

Question

您好我創建一個for循環來生成類似於bootstrap如何做它的網格系統，但與flexbox，我想知道如果有人知道爲什麼即時通訊得到這個錯誤。

@for $i from 1 through 12 { 
    .flex-#{$i} { 
     flex: 0 #{$i} 8.333333333333333 * $i + % ; 
     padding: 0 $default-spacing; 
    } 
} 

這一切編譯完美我剛上使用最新版本的webstorm的這條線

flex: 0 #{$i} 8.333333333333333 * $i + % ; 

也許它的IDE基地，我是個語法錯誤。

任何想法？

謝謝，基蘭。

Answer 1

如果你想將字符串必須用引號括起來，但你得到的字符串：

SASS

flex: 0 #{$i} 8.333333333333333 * $i + "%" 

輸出

flex: 0 1 "8.33333%"; 

在你的情況是更好的多組序爲1％得到一個數字wi個百分比單位

SASS

@for $i from 1 through 12 { 
    .flex-#{$i} { 
     flex: 0 #{$i} 8.333333333333333 * $i * 1% ; 
     padding: 0 10px; 
    } 
} 

輸出

.flex-1 { 
    flex: 0 1 8.33333%; 
    padding: 0 10px; 
} 

.flex-2 { 
    flex: 0 2 16.66667%; 
    padding: 0 10px; 
} 
...