К содержанию

Változók szelektorokon belül LESS-ben

A változókat szelektorokon belül is használhatjuk. Ehhez azonban egy kicsit más szintaxist kell használni a változó beillesztéséhez: a @ jel után a változó nevét kapcsos zárójelekbe kell tenni. Nézzük meg példákon keresztül. Tegyük fel, hogy a következő változónk van:

styles.less@var: div;

Illesszük be ezt a változót a szelektorba. Vizsgáljunk meg különböző helyzeteket.

Példa

Illesszük be a változónkat szelektorként:

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

A fordítás eredménye:

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

Példa

Tegyük fel, hogy most a változónk egy részt tartalmaz a szelektornak:

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

A fordítás eredménye:

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

Példa

Tegyük fel, hogy most azt mondjuk, hogy a változónkban nem a tag neve, hanem a id-ja található. Adjunk meg egy kettős kereszteket a változó neve elé:

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

A fordítás eredménye:

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

Példa

Tegyük fel, hogy most azt mondjuk, hogy a változónkban nem a tag neve, hanem az osztálya található. Adjunk egy pontot a változó neve elé:

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

A fordítás eredménye:

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

Gyakorlati feladatok

Задание 1

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: ul;

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

Задание 2

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: ul;

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

Задание 3

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: ul;

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

Задание 4

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: ul;

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

Задание 5

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: list;

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

Задание 6

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: list;

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

Задание 7

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: list;

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

Задание 8

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: list;

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

Задание 9

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: list;

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

Задание 10

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: .block;

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

Задание 11

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: .block;

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

Задание 12

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

styles.less@var: a;

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

Задание 13

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

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

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

Задание 14

Mondja el, mi lesz a fordítás eredménye a következő kódnak:

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

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