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:
@var: div;
Inseriamo questa variabile in un selettore. Consideriamo varie situazioni.
Esempio
Inseriamo la nostra variabile come selettore:
@{var} {
font-size: 20px;
}
Risultato della compilazione:
div {
font-size: 20px;
}
Esempio
Supponiamo ora che la nostra variabile contenga una parte del selettore:
main @{var} {
font-size: 20px;
}
Risultato della compilazione:
main 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:
#@{var} {
font-size: 20px;
}
Risultato della compilazione:
#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:
.@{var} {
font-size: 20px;
}
Risultato della compilazione:
.div {
font-size: 20px;
}
Compiti pratici
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: ul;
@{var} {
font-size: 20px;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: ul;
div @{var} {
font-size: 20px;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: ul;
div @{var} {
font-size: 20px;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: ul;
@{var} li {
font-size: 20px;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: list;
.@{var} {
font-size: 20px;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: list;
#@{var} li {
font-size: 20px;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: list;
.@{var} li {
font-size: 20px;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: .block;
ul@{var} {
font-size: 20px;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var: a;
@{var}:hover {
text-decoration: none;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Descrivi quale sarà il risultato della compilazione del seguente codice:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
