 |
| Bài 1: Nesting, import trong Sass |
Cấu trúc nesting trong Sass mình nghĩ đây là thứ hay ho mang đến sự khác biệt so với Css thường đôi lúc viết khá nhàm chán vì nó lặp lại khá nhiều. Hãy cùng mình xem đoạn code Css sau.
.content {
background: red;
}
.content a {
color: black;
}
.content a:hover {
color: green;
}
Đó chính là cấu trúc Css các bạn thường viết đúng không nào. Khi chưa biết đến Sass thì bạn nghĩ nó là bình thường và không thể viết khác được vì nó như một "định lý" rồi. Nhưng tin mình đi khi bạn đã biết đến Sass rồi thì bạn sẽ cảm thấy 9 dòng code trên nó quá dài dòng và nhàm chán. Vậy còn chờ gì nữa hay xem 9 dòng code ở dạng Sass thì nó kỳ diệu thế nào nhé.
.content {
background: red;
a {
color: black;
&:hover {
color: green;
}
}
}
Wow quá tuyệt với phải không các bạn. Hãy chú ý đến & nhé nó là một operator cho phép tham chiều đến phần tử đang chứa nó ( liên tưởng nó đến con trỏ this trong các ngôn ngữ lập trình cho dễ hiểu nhé các bạn). Đoạn &:hover ở trên thực chất là a:hover (vì & nằm trong block code của a).
Wow quá tuyệt với phải không các bạn. Hãy chú ý đến & nhé nó là một operator cho phép tham chiều đến phần tử đang chứa nó ( liên tưởng nó đến con trỏ this trong các ngôn ngữ lập trình cho dễ hiểu nhé các bạn). Đoạn &:hover ở trên thực chất là a:hover (vì & nằm trong block code của a).
II. Import file trong Sass
Các bạn cần tạo file mới với đuôi .scss ( cùng cấp nhé). Tên có thể tùy ý nhưng chú ý là phải luôn luôn có dấu _ đằng trước nhé. VD: _button.scss
File nào muốn sử dụng style trong _button.scss thì bạn sử dụng cú pháp sau: @import "button";
Không còn dấu _ nữa nhé các bạn.
Ok đó là tất cả về phần nesting và import file trong Sass trong bài sau mình sẽ giới thiệu về một phần không thể thiếu trong Sass là variables.
