К содержанию

SASS တွင် selector များကို ဆက်စပ်ခြင်း

တစ်ခါတစ်ရံတွင်၊ nested ဖွဲ့စည်းပုံများကို ကွန်ပလိုင်းလုပ်သည့်အခါ ၎င်းတို့သည် ခြားနားချက်မရှိဘဲ၊ ရောနှောစွာဆက်သွယ်ရန် လိုအပ်ပါသည်။ ဤအတွက် nested selector ၏နာမည်ရှေ့တွင် ampersand ထားရှိရန် လိုအပ်သည်။

styles.scssdiv {
  &.block {
    width: 300px;
  }
}

ရလဒ်အနေဖြင့် ကွန်ပလိုင်းပြီးနောက် ကျွန်ုပ်တို့တွင် အောက်ပါကုဒ်ရရှိပါမည်။

styles.cssdiv.block {
  width: 300px;
}

Задание 1

အောက်ပါကုဒ်၏ ကွန်ပလိုင်းရလဒ်သည် မည်သို့ဖြစ်မည်ကို ပြောပြပါ။

styles.scss#block {
  &.xxx {
    width: 300px;
  }
}

Задание 2

အောက်ပါကုဒ်၏ ကွန်ပလိုင်းရလဒ်သည် မည်သို့ဖြစ်မည်ကို ပြောပြပါ။

styles.scss#block {
  .xxx {
    width: 300px;
  }
}

Задание 3

အောက်ပါကုဒ်၏ ကွန်ပလိုင်းရလဒ်သည် မည်သို့ဖြစ်မည်ကို ပြောပြပါ။

styles.scss#block {
  &.xxx {
    &.zzz {
      width: 300px;
    }
  }
}

Задание 4

အောက်ပါကုဒ်၏ ကွန်ပလိုင်းရလဒ်သည် မည်သို့ဖြစ်မည်ကို ပြောပြပါ။

styles.scss#block {
  &.xxx {
    .zzz {
      width: 300px;
    }
  }
}

Задание 5

အောက်ပါကုဒ်၏ ကွန်ပလိုင်းရလဒ်သည် မည်သို့ဖြစ်မည်ကို ပြောပြပါ။

styles.scss#block {
  .xxx {
    &.zzz {
      width: 300px;
    }
  }
}