К содержанию

Spremenljivke znotraj selektorjev v LESS

Spremenljivke lahko uporabimo tudi znotraj selektorjev. Vendar moramo za to uporabiti nekoliko drugačno sintakso za vstavljanje spremenljivke: po @ je treba ime spremenljivke vzeti v zavitih oklepajih. Poglejmo si primere. Recimo, da imamo naslednjo spremenljivko:

styles.less@var: div;

Vstavimo to spremenljivko v selektor. Oglejmo si različne situacije.

Primer

Vstavimo našo spremenljivko kot selektor:

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

Rezultat prevajanja:

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

Primer

Naj zdaj naša spremenljivka vsebuje del selektorja:

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

Rezultat prevajanja:

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

Primer

Recimo zdaj, da v naši spremenljivki ne vsebuje imena oznake, temveč njen id. Dodajmo lojeno pred imenom spremenljivke:

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

Rezultat prevajanja:

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

Primer

Recimo zdaj, da v naši spremenljivki ne vsebuje imena oznake, temveč njen razred. Dodajmo piko pred imenom spremenljivke:

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

Rezultat prevajanja:

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

Praktične naloge

Задание 1

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: ul;

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

Задание 2

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: ul;

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

Задание 3

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: ul;

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

Задание 4

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: ul;

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

Задание 5

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: list;

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

Задание 6

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: list;

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

Задание 7

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: list;

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

Задание 8

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: list;

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

Задание 9

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: list;

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

Задание 10

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: .block;

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

Задание 11

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: .block;

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

Задание 12

Povejte, kakšen bo rezultat prevajanja naslednje kode:

styles.less@var: a;

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

Задание 13

Povejte, kakšen bo rezultat prevajanja naslednje kode:

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

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

Задание 14

Povejte, kakšen bo rezultat prevajanja naslednje kode:

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

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