Kiến thức cơ bản về Sass - bài 3 Lồng nhau (Nesting)
Lượt xem: 3158
Lồng nhau (Nesting)
Khi viết HTML, bạn có thể nhận thấy rằng nó có một hệ thống phân cấp trực quan và lồng nhau rõ ràng. CSS, mặt khác, thì không như vậy.
Sass sẽ cho phép bạn lồng các bộ chọn CSS theo cách phân cấp trực quan giống như HTML của bạn.
Xin lưu ý rằng các quy tắc lồng nhau quá mức sẽ dẫn đến CSS quá kém có thể chứng minh là khó duy trì và thường bị coi là thực tiễn xấu.
Với ý nghĩ đó, đây là một ví dụ về một số kiểu điển hình cho điều hướng của trang web.
Cú pháp SASS
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
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;
}
}
Đầu ra 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;
}
Bạn sẽ nhận thấy rằng ul, li và bộ chọn được lồng bên trong bộ chọn điều hướng. Đây là một cách tuyệt vời để sắp xếp CSS của bạn và làm cho nó dễ đọc hơn.
Nguồn sass-lang.com