Mở rộng lớp trong LESS
Nhược điểm của mixin là nó tạo ra sự trùng lặp mã. Hãy xem ví dụ sau để hiểu ý này.
Giả sử chúng ta có mã sau:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Mã này sẽ được biên dịch như sau, tạo ra sự trùng lặp:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Sẽ gọn gàng hơn nếu mã này được biên dịch như sau:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Điều này có thể đạt được bằng cách sử dụng lệnh &:extend,
lệnh này không chèn mixin trực tiếp vào
mã, mà mở rộng lớp được chỉ định. Hãy
sửa mã của chúng ta:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Hãy cho biết kết quả biên dịch của mã sau sẽ như thế nào:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Hãy cho biết kết quả biên dịch của mã sau sẽ như thế nào:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Hãy cho biết kết quả biên dịch của mã sau sẽ như thế nào:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Hãy cho biết kết quả biên dịch của mã sau sẽ như thế nào:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Hãy cho biết kết quả biên dịch của mã sau sẽ như thế nào:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
