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:
@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:
@{var} {
font-size: 20px;
}
Kompilyasiya nəticəsi:
div {
font-size: 20px;
}
Nümunə
Indi tutaq ki, bizim dəyişənimiz selektorun hissəsini ehtiva edir:
main @{var} {
font-size: 20px;
}
Kompilyasiya nəticəsi:
main 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:
#@{var} {
font-size: 20px;
}
Kompilyasiya nəticəsi:
#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:
.@{var} {
font-size: 20px;
}
Kompilyasiya nəticəsi:
.div {
font-size: 20px;
}
Praktiki tapşırıqlar
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: ul;
@{var} {
font-size: 20px;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: ul;
div @{var} {
font-size: 20px;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: ul;
div @{var} {
font-size: 20px;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: ul;
@{var} li {
font-size: 20px;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: list;
.@{var} {
font-size: 20px;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: list;
#@{var} li {
font-size: 20px;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: list;
.@{var} li {
font-size: 20px;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: .block;
ul@{var} {
font-size: 20px;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var: a;
@{var}:hover {
text-decoration: none;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Aşağıdakı kodun kompilyasiya nəticəsinin nə olacağını izah edin:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
