К содержанию

Variabler inuti selektorer i LESS

Variabler kan också användas inuti selektorer. För att göra detta behöver man dock använda en lite annorlunda syntax för variabelinsättning: efter @ måste variabelnamnet omges av klammerparenteser. Låt oss titta på exempel. Antag att vi har följande variabel:

styles.less@var: div;

Låt oss sätta in denna variabel i en selektor. Låt oss överväga olika situationer.

Exempel

Låt oss sätta in vår variabel som en selektor:

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

Resultat av kompilering:

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

Exempel

Antag nu att vår variabel innehåller en del av selektorn:

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

Resultat av kompilering:

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

Exempel

Antag nu att vi säger att i vår variabel innehålls inte taggnamnet, utan dess id. Lägg till ett nummertecken framför variabelnamnet:

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

Resultat av kompilering:

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

Exempel

Antag nu att vi säger att i vår variabel innehålls inte taggnamnet, utan dess klass. Lägg till en punkt framför variabelnamnet:

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

Resultat av kompilering:

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

Praktiska uppgifter

Задание 1

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: ul;

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

Задание 2

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: ul;

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

Задание 3

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: ul;

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

Задание 4

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: ul;

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

Задание 5

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: list;

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

Задание 6

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: list;

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

Задание 7

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: list;

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

Задание 8

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: list;

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

Задание 9

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: list;

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

Задание 10

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: .block;

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

Задание 11

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: .block;

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

Задание 12

Berätta vad som blir resultatet av kompilering av följande kod:

styles.less@var: a;

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

Задание 13

Berätta vad som blir resultatet av kompilering av följande kod:

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

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

Задание 14

Berätta vad som blir resultatet av kompilering av följande kod:

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

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