SASS cho phép viết một luật lồng bên trong luật khác; khi biên dịch, selector con sẽ được nối với selector cha bằng một khoảng trắng (bộ chọn hậu duệ).
Cho một đoạn SASS gồm một khối cha (có ít nhất 1 thuộc tính riêng) chứa đúng một khối con lồng bên trong (cũng có ít nhất 1 thuộc tính riêng), hãy biên dịch thành hai khối CSS riêng biệt theo thứ tự: khối cha (chỉ thuộc tính riêng của cha) trước, khối con (selector là "cha con", chỉ thuộc tính riêng của con) sau, cách nhau một dòng trống.
Khối SASS lồng 2 cấp: "cha {", các thuộc tính riêng của cha, khối con "con {", các thuộc tính riêng của con, "}" đóng con, "}" đóng cha.
Selector cha và con đều là một class đơn (dạng .tenclass), không chứa khoảng trắng.
In ra khối CSS cha, dòng trống, rồi khối CSS con với selector là nối "cha con" (cách nhau một khoảng trắng).
Ví dụ:
Đầu vào:
.card {
color: black;
.title {
font-weight: bold;
}
}Đầu ra:
.card {
color: black;
}
.card .title {
font-weight: bold;
}Đang tải editor...