1. Nested Rules
Quy tắc này cho phép viết các CSS lồng vào nhau. Khi biên dịch, Sass sẽ cho ra tập tin CSS với đầy đủ các selector theo đúng chuẩn. Kiểu viết này giống với kiểu phân cấp trong HTML
Ta có HTML như sau
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Sass_P1</title><linkrel="stylesheet"href="css/style.css"></head><body><ulclass="menu"><li><ahref="#">Home</a></li><li><ahref="#">Feature</a></li><li><ahref="#">Product</a></li><li><ahref="#">Contact</a></li></ul></body></html>Đây là cách viết CSS thông thường mà mình hay viết
ul.menu{list-style: none;}ul.menu li{float: left;}ul.menu li a{text-decoration: none;color: #696969;font-size: 16px;padding: 6px 9px;margin: 0px 9px;}Còn đây là cách viết theo kiểu Nested Rules
ul.menu{list-style: none;li{float: left;a{text-decoration: none;color: #696969;font-size: 16px;padding: 6px 9px;margin: 0px 9px;}}}2. Referencing Parent Selectors
Sử dụng kí hiệu & đứng trước hiệu ứng, trạng thái mà chúng ta muốn. Ví dụ ta muốn khi hover vào thẻ a thì có gạch chân và đổi màu chữ
ul.menu{list-style: none;li{float: left;a{text-decoration: none;color: #696969;font-size: 16px;padding: 6px 9px;margin: 0px 9px;&:hover{text-decoration: underline;color: #999;}}}}3. Nested Properties
Kiểu viết này sẽ gom các thuộc tính có cùng namespaces giống nhau, ví dụ như margin-left, margin-right, margin-top, margin-bottom…
ul.menu{list-style: none;li{float: left;a{text-decoration: none;color: #696969;font-size: 16px;padding: 6px 9px;margin:{top: 0;bottom: 0;left: 9px;right: 9px;}}}}Còn đây là lúc khi đã Compile ra file CSS
ul.menu{list-style: none;}ul.menu li{float: left;}ul.menu li a{text-decoration: none;color: #696969;font-size: 16px;padding: 6px 9px;margin: 0px 9px;}/*# sourceMappingURL=style.css.map */Nguồn: viblo.asia