SCSS forループが奇妙な構文で動作していますが、構文エラーが発生しました

Question

こんにちは、ブートストラップのグリッドシステムと同様のクラスを生成するforループを作成しますが、flexboxを使用しています。

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

それはすべてが完璧に私はちょうどこの行の構文エラー

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

webstormの最新バージョンを使用して、多分そのIDEベース、イムを取得コンパイルします。

アイデア？

ありがとう、kieran。

Answer 1

あなたは文字列を連結したいあなたが引用されなければならない場合がありますが、文字列を取得：あなたのケースでは

SASS

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

出力

flex: 0 1 "8.33333%"; 

は良くmultiplicateです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; 
} 
...