[scss]class名とかは連結できるよという話

WEB

2023.12.21

規則性のあるclass名を作る際に有効。

こういうこと

.ta{
    &_center{
        text-align: center !important;
    }
    &_right{
        text-align: right !important;
    }
}

↓こうなる

.ta_center{
    text-align: center !important;
}
.ta_right{
    text-align: right !important;
}

「&」は親の階層をそのまま引っ張るってことで、しかもclass、idとしてだけでなく文字列として扱っていいと解釈できる。

WEBサイトのソースコードを巡ってると、ハイフン区切りで繋ぎまくってるclassを偶に見ることがあるのだけど、多分作りとしてはこれのやつ。