К содержанию

Muuttujat selektoreiden sisällä LESS:ssä

Muuttujia voidaan käyttää myös selektoreiden sisällä. Tätä varten on kuitenkin käytettävä hieman erilaista muuttujan lisäys syntaksia: @-merkin jälkeen muuttujan nimi on otettava aaltosulkeisiin. Katsotaanpa esimerkein. Oletetaan, että meillä on seuraava muuttuja:

styles.less@var: div;

Lisätään tämä muuttuja selektoriin. Tarkastellaan erilaisia tilanteita.

Esimerkki

Tehdään muuttujamme lisäys selektorina:

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

Kääntämisen tulos:

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

Esimerkki

Oletetaan nyt, että muuttujamme sisältää osan selektorista:

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

Kääntämisen tulos:

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

Esimerkki

Oletetaan nyt, että sanomme, että muuttujassamme ei sisällä tagin nimeä, vaan sen id:n. Lisätään muuttujan nimen eteen risuaita:

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

Kääntämisen tulos:

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

Esimerkki

Oletetaan nyt, että sanomme, että muuttujassamme ei sisällä tagin nimeä, vaan sen luokan. Lisätään muuttujan nimen eteen piste:

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

Kääntämisen tulos:

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

Käytännön tehtävät

Задание 1

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: ul;

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

Задание 2

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: ul;

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

Задание 3

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: ul;

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

Задание 4

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: ul;

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

Задание 5

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: list;

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

Задание 6

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: list;

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

Задание 7

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: list;

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

Задание 8

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: list;

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

Задание 9

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: list;

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

Задание 10

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: .block;

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

Задание 11

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: .block;

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

Задание 12

Kerro, mikä on seuraavan koodin kääntämisen tulos:

styles.less@var: a;

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

Задание 13

Kerro, mikä on seuraavan koodin kääntämisen tulos:

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

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

Задание 14

Kerro, mikä on seuraavan koodin kääntämisen tulos:

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

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