К содержанию

LESS အတွင်း selector များအတွင်း variable များ

Variable များကို selector များအတွင်း၌လည်း အသုံးပြုနိုင်ပါသည်။ သို့ရာတွင်၊ ၎င်းအတွက် variable ထည့်သွင်းခြင်း၏ syntax အနည်းငယ်ကွဲပြားသော ပုံစံကို အသုံးပြုရန် လိုအပ်ပါသည်- @ ပြီးနောက်တွင် variable ၏ အမည်ကို ကွင်းကောက်များဖြင့် ခံထားရပါမည်။ ဥပမာများဖြင့် ကြည့်ရအောင်။ အောက်ပါ variable ရှိသည်ဟု ဆိုကြပါစို့-

styles.less@var: div;

ဤ variable ကို selector အတွင်းသို့ ထည့်သွင်းကြည့်ကြပါစို့။ အခြေအနေအမျိုးမျိုးကို စဉ်းစားကြည့်ကြပါမည်။

ဥပမာ

ကျွန်ုပ်တို့၏ variable ကို selector အဖြစ် ထည့်သွင်းကြည့်ကြပါမည်-

styles.less@{var} {
  font-size: 20px;
}

Compile လုပ်ပြီးသော ရလဒ်-

styles.cssdiv {
  font-size: 20px;
}

ဥပမာ

ယခု ကျွန်ုပ်တို့၏ variable သည် selector ၏ အစိတ်အပိုင်းတစ်ခုကို ပါဝင်သည်ဟု ဆိုကြပါစို့-

styles.lessmain @{var} {
  font-size: 20px;
}

Compile လုပ်ပြီးသော ရလဒ်-

styles.cssmain div {
  font-size: 20px;
}

ဥပမာ

ယခု ကျွန်ုပ်တို့၏ variable ထဲတွင် tag ၏အမည်မဟုတ်ဘဲ ၎င်း၏ id ပါဝင်သည်ဟု ဆိုကြပါစို့။ variable ၏အမည်ရှေ့တွင် ရှာ့ပ် (hash) ထည့်ကြည့်ကြပါမည်-

styles.less#@{var} {
  font-size: 20px;
}

Compile လုပ်ပြီးသော ရလဒ်-

styles.css#div {
  font-size: 20px;
}

ဥပမာ

ယခု ကျွန်ုပ်တို့၏ variable ထဲတွင် tag ၏အမည်မဟုတ်ဘဲ ၎င်း၏ class ပါဝင်သည်ဟု ဆိုကြပါစို့။ variable ၏အမည်ရှေ့တွင် အစက်တစ်စက် (dot) ထည့်ကြည့်ကြပါမည်-

styles.less.@{var} {
  font-size: 20px;
}

Compile လုပ်ပြီးသော ရလဒ်-

styles.css.div {
  font-size: 20px;
}

လက်တွေ့လေ့ကျင့်ခန်းများ

Задание 1

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: ul;

@{var} {
  font-size: 20px;
}

Задание 2

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 3

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 4

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}

Задание 5

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: list;

.@{var} {
  font-size: 20px;
}

Задание 6

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}

Задание 7

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}

Задание 8

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 9

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 10

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}

Задание 11

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}

Задание 12

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}

Задание 13

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var1: div;
@var2: a;

@{var1} @{var2}:hover {
  text-decoration: none;
}

Задание 14

အောက်ပါ code ကို compile လုပ်လျှင် ရလဒ်မည်သို့ရမည်ကို ရှင်းပြပါ-

styles.less@var1: block1;
@var2: block2;

.@{var1}.@{var2} {
  font-size: 20px;
}