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;

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é.