SCSS MIXINの変換が遅い

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

あなたが/「コンパイル」通常 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: "[email protected]{i}_col_lvl_01"; 

[email protected]{i} #site-name { 
    background-color:@@col_lvl_01_multi; 
} 

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

出典

2017-01-11 Laurence L

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

出典

2017-01-11 10:39:08 Harry

ありがとうハリー。私はSASSについて学ぶことがたくさんあります。 Bootstrapがバージョン4のLESのサポートを中止しているので、私はLESSからSASSに移行しています。今、私はこの比較をしています。 –

私はそれが理由であると期待していました。お力になれて、嬉しいです：） – Harry

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

出典

2017-01-11 09:50:18 RaisingAgent

私はそれを知らなかった。ありがとうRaisingAgent。私はそれに渦を立てます。 –

SCSS MIXINの変換が遅い

答えて

関連する問題