Bài 1: Nesting, import trong Sass

Bài 1: Nesting, import trong Sass

I. Nesting 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).

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.

Mở đầu: Giới thiệu về cái gọi là Sass

Bài đầu tiên trong series học Sass cơ bản này mình chỉ tập trung vào việc giới thiệu về Sass - một công nghệ rất đáng để bạn dành thời gian tìm hiểu trên con đường trở thành một Front-end developer.

Học Sass cơ bản.

Vậy Sass là cái quái gì? Theo như mình được biết thì Sass là một CSS Preprocessor ( bộ tiền sử lý CSS ) nôm na là bạn có thể biên dịch Sass sang Css thường. Vậy Sass có gì đặc biệt mà chúng ta phải mất nhiều kalo viết chỉ để phục vụ mục đích transpiler ra Css thường như vậy? Sao không viết thẳng Css luôn đỡ mất công đúng không nào? Câu trả lời là "hồi sau sẽ rõ" :v khi mình sẽ giới thiệu những điều hay ho mà Sass mang lại như: nested rule, variables, function, mixin ... những thứ mới mẻ này sẽ giúp bạn code Css đỡ nhàm chán hơn, code dễ đọc hơn, maintain ok hơn... 

Warning: Nếu bạn nào học xong Sass mà bị nghiện nó mình không chịu trách nhiệm đâu nhá. Hehe.

Theo như mình tìm hiểu thì Sass giờ có 2 trường phái là: Sass và Scss. Chấc cũng có nhiều bạn nhầm lẫn nghĩ rằng chúng là 2 cái gì đó chẳng có quan hệ gì với nhau nhưng thực chất Scss là con cháu của Sass khi nó là version 3 của Sass. Ở Scss đã thay đổi syntax thò thụt của Sass và thay vào đó là syntax gần gữi với Css hơn. Hãy cùng mình xem qua 2 loại syntax này để hiểu hơn về Sass và Scss nhé.

Sass:

.container

    background: red;

    p

        color: blue;

Scss:

.container {

    background: red;

    p {

        color: blue;

   }

}

Css:

.container {

    background: red;

}

.container p {

    color: blue;

}

Các bạn có thể thấy thì style của Scss rất giống với Css thường hơn khi sử dụng dấu {} thay vì thụt đầu dòng và không có dấu ; của Sass và bản thân mình cũng thích cú pháp của Scss hơn nên trong series học Sass cơ bản này mình sẽ dùng cú pháp scss để trình bày.

Đầu tiên các bạn cần cài đặt Ruby trước vì Sass được viết bằng Ruby mà, sau đó các bạn cài Sass vào máy. Các bạn xem hướng dẫn cài Sass tại trang sass-lang.com nhé.

Giờ chúng ta sẽ cần nhớ 1 số câu lệnh khi làm việc với Sass

1. Transpiler file Scss sang Sss: sass styles.scss styles.css

2. Tự động transpiler khi có thay đổi ở file styles.scss: sass --watch styles.scss styles.css

Ok tạm thời vậy đã, ở các bài tiếp theo chúng ta sẽ cùng nhau tìm hiểu về những điều gì đã làm nên sức mạnh của Sass nhé.