К содержанию

Variabler inne i selektorer i LESS

Variabler kan også brukes inne i selektorer. For dette må man imidlertid bruke litt annen syntaks for innsetting av variabel: etter @ må variabelnavnet omgjøres med krøllparenteser. La oss se på eksempler. La oss si at vi har følgende variabel:

styles.less@var: div;

La oss sette inn denne variabelen i en selektor. La oss vurdere ulike situasjoner.

Eksempel

La oss sette inn variabelen vår som selektor:

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

Kompileringsresultat:

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

Eksempel

La oss nå si at variabelen vår inneholder en del av selektoren:

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

Kompileringsresultat:

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

Eksempel

La oss nå si at vi sier at i variabelen vår ligger ikke navnet på taggen, men dens id. La oss legge til en hashtag foran variabelnavnet:

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

Kompileringsresultat:

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

Eksempel

La oss nå si at vi sier at i variabelen vår ligger ikke navnet på taggen, men dens klasse. La oss legge til en punktum foran variabelnavnet:

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

Kompileringsresultat:

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

Praktiske oppgaver

Задание 1

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: ul;

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

Задание 2

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: ul;

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

Задание 3

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: ul;

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

Задание 4

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: ul;

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

Задание 5

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: list;

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

Задание 6

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: list;

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

Задание 7

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: list;

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

Задание 8

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: list;

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

Задание 9

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: list;

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

Задание 10

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: .block;

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

Задание 11

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: .block;

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

Задание 12

Fortell hva resultatet av kompilering av følgende kode vil være:

styles.less@var: a;

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

Задание 13

Fortell hva resultatet av kompilering av følgende kode vil være:

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

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

Задание 14

Fortell hva resultatet av kompilering av følgende kode vil være:

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

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