К содержанию

Пераменныя ўнутры селектараў у LESS

Пераменныя можна выкарыстоўваць і ўнутры селектараў. Для гэтага, аднак, трэба скарыстацца крыху іншым сінтаксісам устаўкі пераменнай: пасля @ імя пераменнай трэба ўзяць у фігурныя дужкі. Давайце паглядзім на прыкладах. Хай у нас ёсць наступная пераменная:

styles.less@var: div;

Давайце выканаем устаўку гэтай пераменнай у селектар. Разгледзім розныя сітуацыі.

Прыклад

Выканаем устаўку нашай пераменнай у якасці селектара:

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

Вынік кампіляцыі:

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

Прыклад

Хай цяпер наша пераменная ўтрымлівае частку селектара:

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

Вынік кампіляцыі:

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

Прыклад

Хай цяпер мы гаворым, што ў нашай пераменнай утрымліваецца не імя тэга, а яго id. Дададзім перад імем пераменнай рашотку:

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

Вынік кампіляцыі:

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

Прыклад

Хай цяпер мы гаворым, што ў нашай пераменнай утрымліваецца не імя тэга, а яго клас. Дададзім перад імем пераменнай кропку:

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

Вынік кампіляцыі:

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

Практычныя задачы

Задание 1

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: ul;

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

Задание 2

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: ul;

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

Задание 3

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: ul;

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

Задание 4

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: ul;

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

Задание 5

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: list;

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

Задание 6

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: list;

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

Задание 7

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: list;

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

Задание 8

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: list;

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

Задание 9

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: list;

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

Задание 10

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: .block;

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

Задание 11

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: .block;

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

Задание 12

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

styles.less@var: a;

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

Задание 13

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

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

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

Задание 14

Раскажыце, якім будзе вынік кампіляцыі наступнага кода:

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

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