К содержанию

Biến bên trong bộ chọn trong LESS

Biến cũng có thể được sử dụng bên trong các bộ chọn. Tuy nhiên, để làm được điều này, cần phải sử dụng một cú pháp chèn biến hơi khác: sau @ tên biến cần được đặt trong dấu ngoặc nhọn. Hãy xem các ví dụ. Giả sử chúng ta có biến sau:

styles.less@var: div;

Hãy thực hiện chèn biến này vào bộ chọn. Chúng ta sẽ xem xét các trường hợp khác nhau.

Ví dụ

Hãy chèn biến của chúng ta với tư cách là bộ chọn:

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

Kết quả biên dịch:

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

Ví dụ

Bây giờ giả sử biến của chúng ta chứa một phần của bộ chọn:

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

Kết quả biên dịch:

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

Ví dụ

Bây giờ giả sử chúng ta nói rằng trong biến của chúng ta chứa không phải tên thẻ, mà là id của nó. Hãy thêm dấu thăng trước tên biến:

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

Kết quả biên dịch:

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

Ví dụ

Bây giờ giả sử chúng ta nói rằng trong biến của chúng ta chứa không phải tên thẻ, mà là lớp của nó. Hãy thêm dấu chấm trước tên biến:

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

Kết quả biên dịch:

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

Bài tập thực hành

Задание 1

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: ul;

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

Задание 2

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: ul;

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

Задание 3

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: ul;

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

Задание 4

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: ul;

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

Задание 5

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: list;

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

Задание 6

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: list;

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

Задание 7

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: list;

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

Задание 8

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: list;

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

Задание 9

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: list;

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

Задание 10

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: .block;

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

Задание 11

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: .block;

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

Задание 12

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.less@var: a;

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

Задание 13

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

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

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

Задание 14

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

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

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