Giới thiệu về ngôn ngữ SASS

Trong hướng dẫn này, chúng ta sẽ học về bộ tiền xử lý SASS. SASS là một lựa chọn thay thế cho bộ tiền xử lý LESS, nó cũng cho phép lập trình trên CSS.

Trên thực tế, SASS có hai biến thể cú pháp, biến thể đầu tiên cũng được gọi là SASS, còn biến thể thứ hai là SCSS. Cả hai đều hỗ trợ cùng một bộ tính năng và chỉ khác nhau một chút về cú pháp. Tuy nhiên, vì SCSS là biến thể mới hơn và được sử dụng rộng rãi hơn, trong hướng dẫn này chúng ta sẽ học về nó.

Vậy, cú pháp SCSS tương tự như cú pháp CSS, tức là chúng ta sẽ thấy các dấu ngoặc nhọn và các dấu ngoặc kép với dấu chấm phẩy giống như trong CSS. Hãy xem xét một ví dụ về cú pháp SCSS, ở đây chúng ta ngay lập tức gán một phông chữ và một màu sắc cho các biến, sau đó gán các biến này cho các thuộc tính trong bộ chọn body:

$font: Helvetica, sans-serif;
$color: #333;

body {
	font: $font;
	color: $color;
}