Kết hợp bộ chọn trong SASS
Đôi khi chúng ta cần các cấu trúc lồng nhau khi biên dịch không được kết nối thông qua dấu cách, mà là kết dính liền mạch. Để làm điều này, trước tên của bộ chọn lồng nhau cần đặt ký hiệu dấu và:
div {
&.block {
width: 300px;
}
}
Kết quả là sau khi biên dịch, chúng ta sẽ có đoạn mã sau:
div.block {
width: 300px;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
#block {
&.xxx {
width: 300px;
}
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
#block {
.xxx {
width: 300px;
}
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
