К содержанию

LESS တွင် selector များကို ချိတ်ဆက်ခြင်း

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

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

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

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

Задание 1

အောက်ပါကုဒ်၏ compile ရလဒ်သည် အဘယ်သို့ဖြစ်မည်ကို ရှင်းပြပါ။

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

Задание 2

အောက်ပါကုဒ်၏ compile ရလဒ်သည် အဘယ်သို့ဖြစ်မည်ကို ရှင်းပြပါ။

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

Задание 3

အောက်ပါကုဒ်၏ compile ရလဒ်သည် အဘယ်သို့ဖြစ်မည်ကို ရှင်းပြပါ။

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

Задание 4

အောက်ပါကုဒ်၏ compile ရလဒ်သည် အဘယ်သို့ဖြစ်မည်ကို ရှင်းပြပါ။

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

Задание 5

အောက်ပါကုဒ်၏ compile ရလဒ်သည် အဘယ်သို့ဖြစ်မည်ကို ရှင်းပြပါ။

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