Các quy tắc và thuộc tính lồng nhau của Sass
Quy tắc lồng nhau của Sass
Sass cho phép bạn lồng các bộ chọn CSS giống như HTML.
Hãy xem ví dụ về một số mã Sass để điều hướng trang web:
Ví dụ
Cú pháp SCSS:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display:
block;
padding: 6px 12px;
text-decoration: none;
}
}
Lưu ý rằng trong Sass, các bộ chọn ul
, li
và a
được lồng bên trong bộ chọn nav
.
Trong CSS, các quy tắc được xác định từng cái một (không lồng nhau):
Cú pháp CSS:
nav ul {
margin: 0;
padding: 0;
list-style:
none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Vì bạn có thể lồng các thuộc tính trong Sass nên nó sạch hơn và dễ đọc hơn CSS tiêu chuẩn.
Thuộc tính lồng nhau của Sass
Nhiều thuộc tính CSS có cùng tiền tố, như font-family, font-size và font-weight hoặc text-align, text-transform và text-overflow.
Với Sass bạn có thể viết chúng dưới dạng các thuộc tính lồng nhau:
Ví dụ
Cú pháp SCSS:
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
Bộ chuyển mã Sass sẽ chuyển đổi phần trên sang CSS thông thường:
Đầu ra CSS:
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow:
hidden;