SCSS MIXINの変換が遅い

Question

ボディクラスは、ページのセクションの色のブレークに応じて、.m01,.m02,.m03,.m04を持つ場合があります。 LESSをSCSSに変換しようとしていますが、以下のミキシングの変換に問題があります。

あなたが/「コンパイル」通常 CSS(3)にCSSコードの任意の種類を「変換」することができ、ほとんどのコードスニペットのホストサイト上で

//-LESS 
//-Sample colours 
@m01_col_lvl_01: red; 
@m02_col_lvl_01: green; 
@m03_col_lvl_01: blue; 
@m04_col_lvl_01: black; 


//- start colour mixin loop 
.module_colours(4); 
.module_colours(@n, @i: 1) when (@i =< @n) { 

//-colours 
@col_lvl_01_multi: "m0@{i}_col_lvl_01"; 

.m0@{i} #site-name { 
    background-color:@@col_lvl_01_multi; 
} 

//- end colour mixin loop 
.module_colours(@n, (@i+1)); 
} 

Answer 1

RaisingAgentの答えは合理的には良い方法ですが、Sassでこのことを行う方法やSassの仕組みを理解するのに役立ちません。この回答はあなたに役立ちます。

Lessとは異なり、Sassでは、名前が補間によって動的に作成される変数（@col_lvl_01_multi変数）にアクセスすることはできません。あなたはリストを利用しなければならず、これにはnthが機能します。

Sassには組み込みの@forディレクティブがあり、これはループの作成に使用できるため、ミックスインを使ってforループを模倣する必要はありません。だから、あなたのコードは次のようにSassに変換することができます：

$m_col_lvl_01_list: red green blue black; // the list 

@for $i from 1 through 4 { // the loop 
    .m0#{$i} #site-name { // interpolated selector name 
    background-color: nth($m_col_lvl_01_list, $i); //nth function to access the value based on for loop index. 
    } 
} 

Answer 2

。私はいつもCodepenを使用してからCSS to SCSS converterを使用します。あなたの場合、私はちょうどそれを部分的に変換しています。 （コデプトンでは、小さい⚙ボタンをクリックし、CSS Preprocessorを設定する必要があります）。