К содержанию

Variabla brenda selektorëve në LESS

Variablat mund të përdoren edhe brenda selektorëve. Sidoqoftë, për këtë duhet të përdorni një sintaksë paksa të ndryshme të futjes së variablës: pas @ emri i variablës duhet të vendoset në kllapa kaçurrelë. Le të shohim me shembuj. Le të themi se kemi variablin e mëposhtëm:

styles.less@var: div;

Le të kryejmë futjen e kësaj variable në selektor. Le të shqyrtojmë situata të ndryshme.

Shembull

Le të kryejmë futjen e variablës sonë si selektor:

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

Rezultati i kompilimit:

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

Shembull

Le të themi tani se variabla jonë përmban një pjesë të selektorit:

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

Rezultati i kompilimit:

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

Shembull

Le të themi tani se themi se në variablin tonë përmbahet jo emri i tag-ut, por id i tij. Le të shtojmë një simbol diez para emrit të variablës:

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

Rezultati i kompilimit:

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

Shembull

Le të themi tani se themi se në variablin tonë përmbahet jo emri i tag-ut, por klasa e tij. Le të shtojmë një pikë para emrit të variablës:

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

Rezultati i kompilimit:

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

Detyra praktike

Задание 1

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: ul;

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

Задание 2

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: ul;

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

Задание 3

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: ul;

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

Задание 4

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: ul;

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

Задание 5

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: list;

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

Задание 6

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: list;

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

Задание 7

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: list;

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

Задание 8

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: list;

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

Задание 9

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: list;

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

Задание 10

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: .block;

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

Задание 11

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: .block;

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

Задание 12

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

styles.less@var: a;

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

Задание 13

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

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

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

Задание 14

Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:

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

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