Giới thiệu Sass

Những điều bạn nên biết

Trước khi tiếp tục, bạn nên có sự hiểu biết cơ bản về:

• HTML
• CSS

Nếu bạn muốn học các môn này trước, hãy truy cập Trang chủ truy cập các bài giảng này.

Tìm hiểu Sass là gì?

• Sass là gì? Syntactically Awesome Stylessheet (bảng style với ngữ pháp tuyệt vời)
• Sass là một CSS extension
• Sass là một CSS preprocessor
• Sass hoàn toàn tương thích với tất cả các phiên bản của CSS
• Sass giảm thiểu sự lặp lại của CSS, từ đó tiết kiệm thời gian
• Sass được thiết kế bởi Hampton Catlin và phát triển bởi Natalie Weizenbaum vào năm 2006
• Sass có thể tải xuống và sử dụng miễn phí

Tại sao lại sử dụng Sass?

Bảng style ngày càng lớn, ngày càng phức tạp và ngày càng khó bảo trì. Đây là nơi CSS preprocessor có thể giúp đỡ.

Sass cho phép bạn sử dụng các tính năng không có trong CSS, chẳng hạn như biến, quy tắc nhúng, mixin, nhập khẩu, kế thừa, hàm tích hợp và các tính năng khác.

Một ví dụ đơn giản và hữu ích về Sass

Giả sử chúng ta có một trang web với ba màu chính:

Vậy, bạn cần gõ những giá trị HEX này bao nhiêu lần? Nhiều lần. Nếu màu sắc giống nhau thay đổi thì sao?

Bạn có thể viết mã Sass sau đây thay vì gõ nhiều lần giá trị trên.

Mẫu Sass

/* Định nghĩa biến cho màu sắc ban đầu */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Sử dụng biến */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Vì vậy, khi sử dụng Sass, nếu màu sắc ban đầu thay đổi, bạn chỉ cần thay đổi nó ở một nơi.

Sass hoạt động như thế nào?

Trình duyệt không hiểu mã Sass. Do đó, bạn cần một bộ tiền xử lý Sass để chuyển đổi mã Sass thành CSS tiêu chuẩn.

Quá trình này được gọi là chuyển dịch (transpiling). Do đó, bạn cần cung cấp mã Sass cho bộ chuyển dịch (một chương trình) và sau đó lấy lại mã CSS.

Lưu ý:Chuyển dịch là một thuật ngữ dùng để chuyển đổi/điều dịch mã nguồn viết bằng một ngôn ngữ sang ngôn ngữ khác.

Loại tệp Sass

Tên mở rộng tệp của tệp Sass là ".scss".

Bình luận Sass

Sass hỗ trợ các bình luận CSS tiêu chuẩn /* comment */Ngoài ra còn hỗ trợ bình luận trong dòng // comment:

Mẫu Sass

/* Định nghĩa màu chính */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Sử dụng biến */
.main-header {
  background-color: $primary_1; // Bạn có thể thêm bình luận trong dòng này
}