SASS変数でクラス名をカスタマイズする

Question

SASSで変数をカスタマイズする方法はありますか？たとえば ：私は要素にクラス=「M-B-50」を与えた場合、それは、私はちょうどそれがSASSで可能であるかどうかを知りたいマージン下50

.m-b-{$number} { 
    margin-bottom: $number; 
} 

取る必要があります。

Answer 1

はい、#{}をSASSの変数置換に使用するvariable interpolation or variable substitutionの助けを借りて可能です。

補間は、変数がそれらの対応する値に置き換えられた結果を得、発現または1つ以上の変数を含む文字列を評価するプロセスです。

$number:60; 
$n: 20px; 

.m-b-#{$number}{ 
    margin-bottom: #{$number}px; 
    margin-top: $n; 
}