1. SCSS補間とは何ですか？
サスでは、我々ができ、「構造」に、それによって、新しいセレクタ名「セレクタ名」、「プロパティ名」と「属性値」の「変数の値」挿入補間を使用して実施すること新しいプロパティ名と新しいプロパティ値。
2.構文：
＃{変数}
例：「セレクター名」の補間
@for $i from 1 through 3
{
.item-#{$i}
{
width:10px * $i;
}
}
CSSコードでコンパイルされました：
.item-1
{
width: 10px;
}
.item-2
{
width: 20px;
}
.item-3
{
width: 30px;
}
例：「プロパティ名」の補間
$border:border;
div
{
#{$border}-width:1px;
#{$border}-style:solid;
#{$border}-color:red;
}
次のようにCSSコードでコンパイルは以下のとおりです。
div
{
border-width: 1px;
border-style: solid;
border-color: red;
}
注意：変数は、プロパティの値のみを使用することができ、それが直接、属性名に使用することはできません
例：補間のための「属性値」
@for $i from 1 through 3
{
.item-#{$i}
{
border:#{$i}px solid red;
}
}
次のようにCSSコードでコンパイルは以下のとおりです。
.item-1
{
border: 1px solid red;
}
.item-2
{
border: 2px solid red;
}
.item-3
{
border: 3px solid red;
}