Giới thiệu Sass
Những gì bạn nên biết
Trước khi tiếp tục, bạn cần có hiểu biết cơ bản về những điều sau:
- HTML
- CSS
Nếu bạn muốn nghiên cứu những chủ đề này trước, hãy tìm các hướng dẫn trên Trang chủ của chúng tôi.
Sass là gì?
- Sass là viết tắt của Syntactally Một bảng tính S tyle tuyệt vời
- Sass là một phần mở rộng của CSS
- Sass là bộ xử lý trước CSS
- Sass hoàn toàn tương thích với mọi phiên bản CSS
- Sass giảm sự lặp lại của CSS và do đó tiết kiệm thời gian
- Sass được thiết kế bởi Hampton Catlin và được phát triển bởi Natalie Weizenbaum vào năm 2006
- Sass được tải xuống và sử dụng miễn phí
Tại sao nên sử dụng Sass?
Các bảng định kiểu ngày càng lớn hơn, phức tạp hơn và khó bảo trì hơn. Đây là lúc bộ xử lý trước CSS có thể trợ giúp.
Sass cho phép bạn sử dụng các tính năng không tồn tại trong CSS, như biến, quy tắc lồng nhau, mixin, nhập, kế thừa, hàm dựng sẵn và các nội dung khác.
Một ví dụ đơn giản tại sao Sass lại hữu ích
Giả sử chúng ta có một trang web có ba màu chính:
#a2b9bc
#b2ad7f
#878f99
Vậy bạn cần gõ những giá trị HEX đó bao nhiêu lần? Nhiều thời gian. Và còn những biến thể của cùng một màu sắc thì sao?
Thay vì gõ các giá trị trên nhiều lần, bạn có thể sử dụng Sass và viết như sau:
Ví dụ về Sass
/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3:
#878f99;
/*
use the variables */
.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 và màu chính thay đổi, bạn chỉ cần thay đổi một chỗ.
Sass hoạt động như thế nào?
Trình duyệt không hiểu mã Sass. Do đó, bạn sẽ cần bộ xử lý trước Sass để chuyển đổi mã Sass thành CSS tiêu chuẩn.
Quá trình này được gọi là dịch mã. Vì vậy, bạn cần cung cấp cho bộ chuyển mã (một loại chương trình nào đó) một số mã Sass và sau đó lấy lại một số mã CSS.
Mẹo: Dịch mã là thuật ngữ dùng để lấy mã nguồn được viết bằng một ngôn ngữ và chuyển đổi/dịch nó sang ngôn ngữ khác.
Loại tệp Sass
Các tệp Sass có phần mở rộng tệp ".scss".
Bình luận hỗn xược
Sass hỗ trợ các nhận xét CSS tiêu chuẩn /* comment */ và ngoài ra nó còn hỗ trợ các nhận xét nội tuyến // comment :
Ví dụ về Sass
/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/*
use the variables */
.main-header
{
background-color: $primary_1; // here you can put an inline comment
}