К содержанию

Variabler inde i selektorer i LESS

Variabler kan også bruges inde i selektorer. Dog skal man bruge en lidt anden syntaks for at indsætte variablen: efter @ skal variabelnavnet omgives af krøllede parenteser. Lad os se på eksempler. Lad os sige, at vi har følgende variabel:

styles.less@var: div;

Lad os indsætte denne variabel i en selektor. Lad os overveje forskellige situationer.

Eksempel

Lad os indsætte vores variabel som selektor:

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

Kompileringsresultat:

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

Eksempel

Lad os nu sige, at vores variabel indeholder en del af selektoren:

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

Kompileringsresultat:

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

Eksempel

Lad os nu sige, at vi siger, at vores variabel indeholder ikke et tag-navn, men dens id. Lad os tilføje en hashtag foran variabelnavnet:

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

Kompileringsresultat:

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

Eksempel

Lad os nu sige, at vi siger, at vores variabel indeholder ikke et tag-navn, men dens klasse. Lad os tilføje en punktum foran variabelnavnet:

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

Kompileringsresultat:

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

Praktiske opgaver

Задание 1

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: ul;

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

Задание 2

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: ul;

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

Задание 3

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: ul;

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

Задание 4

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: ul;

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

Задание 5

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: list;

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

Задание 6

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: list;

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

Задание 7

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: list;

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

Задание 8

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: list;

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

Задание 9

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: list;

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

Задание 10

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: .block;

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

Задание 11

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: .block;

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

Задание 12

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

styles.less@var: a;

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

Задание 13

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

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

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

Задание 14

Fortæl, hvad resultatet af kompileringen af følgende kode vil være:

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

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