衝突を回避する範囲でクラスを整理する手法の1つは、親のクラスを拡張し、いくつかの接尾辞を追加することです。SCSS。第2レベルの昇順セレクタを参照する
.a{
&__b{}
&__c{}
&__d{}
: - :たとえば、次のように実現することができる構造上のように
&
コードを複製ないの考察から
<div class="a">
<div class="a__b">
<div class="a__c">
<span class="a__d">
は、SASS/SCSSファイルで、1は、アンパサンドの助けを借りて、親を参照することができます
.a__b {}
.a__c {}
.a__d {}
しかし、一つの結果として、このようなcss
を取得する必要があるときに困難が表示されます。:にtransfomedさ
.a:hover{
color: red;
}
.a:hover .a__b{
color: blue;
}
主なアイデアはセレクタを複製することではないので、2番目のレベルの親を参照する方法がありますか?私は&&
が問題ではないことを知っていますが、ダブルアンパサンドの動作をシミュレートする方法はありますか?
.a{
&:hover{
color: red;
& __b { /* & -> .a:hover, but I need just .a */
color: blue;
}
}
}
ない問題、.a
が複製されます。
.a:hover { //here
color: red;
.a__b { //here
color: blue;
}
}
もない問題:だから
.a { //ok
&:hover {
color: red;
.a__b { //oops, duplicated selector
color: blue;
}
}
}
、回避衝突の配慮から、何度もクラスが持っています長い名前。そしてそれは、複製されたセレクタがコードを恐ろしく見せてしまうときです。代わりに.a
セレクタの代わりに、.custom-layers-list-panel-conatiner
があると想像してください。重複したクラスを避ける別の理由は、親クラスが変更された場合は、どこでも変更する必要があるということです。はい、最近、いくつかの特定のツールでは非常に簡単な作業ですが、まだ間違いが現れる場所が残っています。
はい、それです!ありがとう。 –
あなたは大歓迎です:) –
これはすばらしいことです!私の投稿を更新しました。私はあなたの答えを受け入れることができないし、upvoteを2回することはできません残念です:) –