SASS တွင် @extend နှင့် selector များ၏ အစဉ်လိုက်

@extend directive ကို selector များ၏ အစဉ်လိုက်ကို ချဲ့ထွင်ရန် အသုံးပြုနိုင်ပါသည်။ အောက်ပါ နမူနာကို ကြည့်ပါ။

နမူနာတစ်ခုကို သုံးသပ်ကြည့်ပါ။

style.scss#menu .navbar {
  @extend div;
}
div {
  color: #0a0a4b;
  &:hover {
    text-decoration: underline;
  }
}

Compile ပြုလုပ်ပြီးနောက် အောက်ပါ code ကို ရရှိပါမည်။

style.cssdiv, #menu .navbar {
  color: #0a0a4b;
}
div:hover, #menu .navbar:hover {
  text-decoration: underline;
}

Задание 1

အောက်ပါ code ၏ compile ရလဒ်သည် အဘယ်နည်း ရှင်းပြပါ။

styles.scssbutton {
  @extend link;
}

link {
  font-size: 10px;
  &:active {
    color: #f0ffff;
    background-color: #110c63;
  }
}

Задание 2

အောက်ပါ code ၏ compile ရလဒ်သည် အဘယ်နည်း ရှင်းပြပါ။

styles.scss.main-text {
  font-family: Impact;
}

button {
  @extend link;
  font-size: 10px;
  @extend .main-text;
}

link {
  &:hover {
    color: #333333;
    background-color: #6d6d6d;
  }
}