SASS တွင် selector များကို ဆက်စပ်ခြင်း
တစ်ခါတစ်ရံတွင်၊ nested ဖွဲ့စည်းပုံများကို ကွန်ပလိုင်းလုပ်သည့်အခါ ၎င်းတို့သည် ခြားနားချက်မရှိဘဲ၊ ရောနှောစွာဆက်သွယ်ရန် လိုအပ်ပါသည်။ ဤအတွက် nested selector ၏နာမည်ရှေ့တွင် ampersand ထားရှိရန် လိုအပ်သည်။
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;
}
}
}
