К содержанию

Vigezo ndani ya vibaguzi katika LESS

Vigezo vinaweza kutumika pia ndani ya vibaguzi. Hata hivyo, kwa kufanya hivyo, unahitaji kutumia sintaksia tofauti kidyo ya kuingiza kigezo: baada ya @ jina la kigezo linahitaji kuzingirwa kwa mabano ya curly. Hebu tuangalie kwa mifano. Wacha tuchukulie tuna kigezo kifuatacho:

styles.less@var: div;

Wacha tuingize kigezo hiki ndani ya kibaguzi. Hebu tuchunguze hali mbalimbali.

Mfano

Wacha tuingize kigezo chetu kama kibaguzi:

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

Matokeo ya ukusanyaji:

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

Mfano

Wacha sasa kigezo chetu kikibebea sehemu ya kibaguzi:

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

Matokeo ya ukusanyaji:

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

Mfano

Wacha sasa tuseme kwamba katika kigezo chetu hakimo jina la kitambulisho (tag), bali ni id yake. Wacha tuongeze alama ya sauti mbele ya jina la kigezo:

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

Matokeo ya ukusanyaji:

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

Mfano

Wacha sasa tuseme kwamba katika kigezo chetu hakimo jina la kitambulisho (tag), bali ni darasa lake. Wacha tuongeze doti mbele ya jina la kigezo:

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

Matokeo ya ukusanyaji:

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

Kazi za Vitendo

Задание 1

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: ul;

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

Задание 2

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: ul;

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

Задание 3

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: ul;

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

Задание 4

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: ul;

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

Задание 5

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: list;

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

Задание 6

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: list;

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

Задание 7

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: list;

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

Задание 8

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: list;

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

Задание 9

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: list;

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

Задание 10

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: .block;

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

Задание 11

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: .block;

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

Задание 12

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

styles.less@var: a;

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

Задание 13

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

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

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

Задание 14

Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:

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

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