Пераменныя ўнутры селектараў у LESS
Пераменныя можна выкарыстоўваць і ўнутры селектараў.
Для гэтага, аднак, трэба скарыстацца
крыху іншым сінтаксісам устаўкі пераменнай:
пасля @ імя пераменнай трэба ўзяць
у фігурныя дужкі. Давайце паглядзім на прыкладах.
Хай у нас ёсць наступная пераменная:
@var: div;
Давайце выканаем устаўку гэтай пераменнай у селектар. Разгледзім розныя сітуацыі.
Прыклад
Выканаем устаўку нашай пераменнай у якасці селектара:
@{var} {
font-size: 20px;
}
Вынік кампіляцыі:
div {
font-size: 20px;
}
Прыклад
Хай цяпер наша пераменная ўтрымлівае частку селектара:
main @{var} {
font-size: 20px;
}
Вынік кампіляцыі:
main div {
font-size: 20px;
}
Прыклад
Хай цяпер мы гаворым, што ў нашай пераменнай
утрымліваецца не імя тэга, а яго id.
Дададзім перад імем пераменнай рашотку:
#@{var} {
font-size: 20px;
}
Вынік кампіляцыі:
#div {
font-size: 20px;
}
Прыклад
Хай цяпер мы гаворым, што ў нашай пераменнай утрымліваецца не імя тэга, а яго клас. Дададзім перад імем пераменнай кропку:
.@{var} {
font-size: 20px;
}
Вынік кампіляцыі:
.div {
font-size: 20px;
}
Практычныя задачы
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: ul;
@{var} {
font-size: 20px;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: ul;
div @{var} {
font-size: 20px;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: ul;
div @{var} {
font-size: 20px;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: ul;
@{var} li {
font-size: 20px;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: list;
.@{var} {
font-size: 20px;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: list;
#@{var} li {
font-size: 20px;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: list;
.@{var} li {
font-size: 20px;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: .block;
ul@{var} {
font-size: 20px;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var: a;
@{var}:hover {
text-decoration: none;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Раскажыце, якім будзе вынік кампіляцыі наступнага кода:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
