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:
@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:
@{var} {
font-size: 20px;
}
Kết quả biên dịch:
div {
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:
main @{var} {
font-size: 20px;
}
Kết quả biên dịch:
main 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:
#@{var} {
font-size: 20px;
}
Kết quả biên dịch:
#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:
.@{var} {
font-size: 20px;
}
Kết quả biên dịch:
.div {
font-size: 20px;
}
Bài tập thực hành
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: ul;
@{var} {
font-size: 20px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: ul;
div @{var} {
font-size: 20px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: ul;
div @{var} {
font-size: 20px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: ul;
@{var} li {
font-size: 20px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: list;
.@{var} {
font-size: 20px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: list;
#@{var} li {
font-size: 20px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: list;
.@{var} li {
font-size: 20px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: .block;
ul@{var} {
font-size: 20px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var: a;
@{var}:hover {
text-decoration: none;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
