К содержанию

Variabili all'interno dei selettori in LESS

Le variabili possono essere utilizzate anche all'interno dei selettori. Tuttavia, per farlo, è necessario utilizzare una sintassi leggermente diversa per l'inserimento della variabile: dopo @ il nome della variabile deve essere racchiuso in parentesi graffe. Diamo un'occhiata agli esempi. Supponiamo di avere la seguente variabile:

styles.less@var: div;

Inseriamo questa variabile in un selettore. Consideriamo varie situazioni.

Esempio

Inseriamo la nostra variabile come selettore:

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

Risultato della compilazione:

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

Esempio

Supponiamo ora che la nostra variabile contenga una parte del selettore:

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

Risultato della compilazione:

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

Esempio

Supponiamo ora di dire che nella nostra variabile non è contenuto il nome del tag, ma il suo id. Aggiungiamo un cancelletto prima del nome della variabile:

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

Risultato della compilazione:

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

Esempio

Supponiamo ora di dire che nella nostra variabile non è contenuto il nome del tag, ma la sua classe. Aggiungiamo un punto prima del nome della variabile:

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

Risultato della compilazione:

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

Compiti pratici

Задание 1

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: ul;

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

Задание 2

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: ul;

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

Задание 3

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: ul;

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

Задание 4

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: ul;

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

Задание 5

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: list;

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

Задание 6

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: list;

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

Задание 7

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: list;

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

Задание 8

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: list;

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

Задание 9

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: list;

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

Задание 10

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: .block;

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

Задание 11

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: .block;

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

Задание 12

Descrivi quale sarà il risultato della compilazione del seguente codice:

styles.less@var: a;

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

Задание 13

Descrivi quale sarà il risultato della compilazione del seguente codice:

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

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

Задание 14

Descrivi quale sarà il risultato della compilazione del seguente codice:

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

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