通常Sassのローカル変数はスタイルセットの外側で使用することができません。セレクタ名の一部で変数を使用する場合、以下のように記述すると定義されていない変数を参照することになり、コンパイルエラーが発生します。
.products {
&-item {
$this: &;
}
&-photo {
margin-top: 20px;
#{$this}:first-child & {
margin-top: 0;
}
}
}
そこで以下の記述に変更します。変数$thisを参照できる位置に記述し、スタイルセット内で上書きします。
.products {
$this: &;
&-item {
$this: &;
}
&-photo {
margin-top: 20px;
#{$this}:first-child & {
margin-top: 0;
}
}
}
これで以下の通り、正常にコンパイルができます。変数$thisの中身は「.products」ではなく「.products-item」になっているのがポイントです。
.products-photo {
margin-top: 20px;
}
.products-item:first-child .products-photo {
margin-top: 0;
}





