LESSにおけるセレクタの結合
時々、コンパイル時に、入れ子構造がスペースを介さずに、 密接に結合されることが必要な場合があります。 これを行うには、入れ子になったセレクタ名の前に アンパサンドを配置する必要があります:
div {
&.block {
width: 300px;
}
}
結果として、コンパイル後には以下のコードが生成されます:
div.block {
width: 300px;
}
次のコードをコンパイルした結果がどうなるか説明してください:
#block {
&.xxx {
width: 300px;
}
}
次のコードをコンパイルした結果がどうなるか説明してください:
#block {
.xxx {
width: 300px;
}
}
次のコードをコンパイルした結果がどうなるか説明してください:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
次のコードをコンパイルした結果がどうなるか説明してください:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
次のコードをコンパイルした結果がどうなるか説明してください:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}