К содержанию

LESS-də selektorların daxilində dəyişənlər

Dəyişənləri selektorların daxilində də istifadə etmək olar. Bununla belə, bunun üçün dəyişənin əlavə edilməsi sintaksisindən biraz fərqli şəkildə istifadə etmək lazımdır: @ işarəsindən sonra dəyişənin adı qıvrım mötərizələr içərisində yazılmalıdır. Gəlin nümunələr üzərində baxaq. Tutaq ki, bizim aşağıdakı dəyişənimiz var:

styles.less@var: div;

Gəlin bu dəyişəni selektorun daxilinə əlavə edək. Müxtəlif vəziyyətləri nəzərdən keçirək.

Nümunə

Gəlin dəyişənimizi selektor kimi əlavə edək:

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

Kompilyasiya nəticəsi:

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

Nümunə

Indi tutaq ki, bizim dəyişənimiz selektorun hissəsini ehtiva edir:

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

Kompilyasiya nəticəsi:

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

Nümunə

Indi tutaq ki, biz deyirik ki, dəyişənimizdə teqin adı deyil, onun id saxlanılır. Dəyişənin adından əvvəl diez işarəsi əlavə edək:

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

Kompilyasiya nəticəsi:

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

Nümunə

Indi tutaq ki, biz deyirik ki, dəyişənimizdə teqin adı deyil, onun sinfi saxlanılır. Dəyişənin adından əvvəl nöqtə əlavə edək:

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

Kompilyasiya nəticəsi:

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

Praktiki tapşırıqlar

Задание 1

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: ul;

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

Задание 2

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: ul;

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

Задание 3

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: ul;

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

Задание 4

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: ul;

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

Задание 5

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: list;

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

Задание 6

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: list;

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

Задание 7

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: list;

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

Задание 8

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: list;

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

Задание 9

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: list;

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

Задание 10

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: .block;

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

Задание 11

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: .block;

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

Задание 12

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

styles.less@var: a;

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

Задание 13

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

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

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

Задание 14

Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:

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

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