Viết CSS hiệu quả hơn với Sass
Nếu bạn là một lập trình viên website thường xuyên phải làm việc với CSS, có thể bạn đã nghe qua về Sass. Sass là một công cụ CSS preprocessor giúp chúng ta viết CSS dễ dàng và khoa học hơn. Hiểu và sử dụng thành thạo Sass sẽ mang lại nhiều lợi ích cho web developer như tiết kiệm thời gian và quản lý file CSS tốt hơn. Bizfly Cloud sẽ giới thiệu các khái niệm và tính năng cơ bản trong Sass.
CSS preprocessor là gì?
Theo Mozilla thì CSS preprocessor, hay bộ tiền xử lí CSS, là một chương trình cho phép bạn tạo CSS từ các cú pháp của chính chương trình đó. Những cú pháp này sau đó sẽ được biên dịch ra CSS.
Bạn có thể thắc mắc, tại sao phải sử dụng cú pháp của các CSS preprocessor trong khi chính CSS cũng có cú pháp của riêng nó?
Câu trả lời là tối ưu. Những bộ tiền xử lí CSS thường có các cú pháp và tính năng giúp chúng ta viết CSS nhanh hơn và có cấu trúc tốt hơn so với CSS gốc. Vì thế, bạn có thể tiết kiệm thời gian viết CSS, cũng như dễ dàng bảo trì và phát triển CSS trong tương lai.
Có nhiều bộ tiền xử lý CSS để lựa chọn, hầu hết trong số đó sẽ có thêm một số tính năng không tồn tại trong CSS thuần. Một trong số các CSS preprocessor phổ biến nhất là Sass.
Tìm hiểu thêm: Sass là gì? Sử dụng Sass để viết CSS như thế nào?
Cài đặt Sass
Lưu ý: Sass là một ứng dụng được viết bằng Ruby nên chúng ta cần cài đặt Ruby trước khi cài đặt Sass.
Sau khi đã có Ruby, các bạn chạy lệnh:
gem install sass
Trước khi bắt tay vào sử dụng Sass, ta cần thao tác vài lệnh cơ bản:
Chuyển đổi tập tin .sass sang .css:
sass app.scss app.css
Tự động thực hiện chuyển đổi trong quá trình làm việc:
sass --watch app.scss:app.css
Để chuyển đổi tất cả một thư mục trong quá trình làm việc:
sass --watch app/sass:public/css
Sử dụng Sass
Dưới đây là một vài quy tắc viết Sass thông dụng nhất.
Quy tắc xếp chồng
Một trong những tính năng nổi trội của Sass là nested rules - quy tắc xếp chồng.
Ví dụ, với code SCSS:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Sau khi biên dịch sang CSS ta được:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Có thể thấy, thay vì phải khai báo selector nav lặp lại nhiều lần như trong CSS truyền thống, Sass cho phép ta khai báo một cách khoa học và tiết kiệm thời gian hơn bằng quy tắc lồng ghép.
Tuy nhiên, lưu ý rằng mặc dù nesting rules giúp giảm bớt lượng code cần viết, nhưng chính vì thế nó cũng có thể khiến bạn khó kiểm soát được số lượng CSS mà bạn thực sự tạo ra. Bạn càng lồng sâu (nhiều tầng), càng cần nhiều băng thông để tải CSS và trình duyệt sẽ phải thực hiện thêm nhiều tác vụ để có thể hiển thị CSS.
Tham khảo thêm tại: https://sass-lang.com/documentation/style-rules#nesting
Sử dụng biến trong Sass
Sử dụng các biến trong Sass rất đơn giản: bạn gán một giá trị cho một cái tên bắt đầu bằng $ và sau đó bạn có thể sử dụng tên đó thay vì giá trị của nó.\
Mặc dù nguyên lí khá đơn giản, nhưng đây là một trong những công cụ hữu ích nhất mà Sass mang lại. Các biến giúp giảm đáng kể sự lặp lại, thậm chí, ta có thể thực hiện các phép toán phức tạp, cấu hình các thư viện và nhiều ứng dụng khác.
Để hiểu rõ hơn, hãy quan sát ví dụ sau:
$width: 70px;
#container {
width: $width;
}
#main {
max-width: $width;
}
Sau khi biên dịch sang CSS, ta sẽ được:
#container {
width: 70px;
}
#main {
max-width: 70px;
}
Tham khảo thêm tại: https://sass-lang.com/documentation/variables
Quy tắc Mixin
Mixins cho phép bạn xác định các style có thể được sử dụng lại trong suốt quá trình xây dựng stylesheet. Chúng giúp tránh sử dụng các class non-semantic như .float-left.
Để hiểu rõ hơn, hãy xem ví dụ:
Đầu tiên, ta khai báo Mixins:
@mixin required {
font-size: 15px;
font-weight: bold;
color: blue;
}
Sử dụng Mixin:
.required{
@include required;
padding: 7px;
margin: 10px;
}
Sau khi biên dịch sang CSS, ta được:
.required {
font-size: 15px;
font-weight: bold;
color: blue;
padding: 7px;
margin: 10px;
}
Tham khảo thêm tại: https://sass-lang.com/documentation/at-rules/mixin
Quy tắc kế thừa
Quy tắc kế thừa (@extend) cho phép bạn chỉ định một thành phần được phép thừa hưởng tất cả các thuộc tính CSS của một vùng chọn bất kỳ mà bạn đã khai báo sẵn.
Xem xét ví dụ sau:
.error {
color: red;
}
.error-bold {
@extend .error;
font-weight: bold
}
Sau khi biên dịch sang CSS, ta được:
.error, .error-bold {
color: red;
}
.error-bold {
font-weight: bold;
}
Có thể thấy, error-bold được thừa hưởng toàn bộ các thuộc tính của error, trong trường hợp này là color:red.
Tham khảo thêm tại: https://sass-lang.com/documentation/at-rules/extend
Mệnh đề điều kiện trong Sass
Sass cung cấp một số quy tắc (mệnh đề điều kiện) cho phép kiểm soát thời điểm các style hiển thị hay hiển thị chúng nhiều lần với các biến thể khác nhau.
Chúng cũng có thể được sử dụng trong mixins và các hàm để viết các thuật toán nhỏ để giúp việc viết Sass của bạn dễ dàng hơn. Sass hỗ trợ bốn quy tắc kiểm soát flow:
@if kiểm soát xem một block có được đánh giá hay không.
@each đánh giá một block cho từng thành phần trong danh sách hoặc từng cặp trong bản đồ.
@for đánh giá một block theo một số lần nhất định.
@while đánh giá một block cho đến khi một điều kiện nhất định được đáp ứng.
Tham khảo thêm tại: https://sass-lang.com/documentation/at-rules/control
Lời kết
Hy vọng các thông tin trên đây sẽ giúp bạn có thêm kiến thức để sử dụng Sass linh hoạt hơn, phục vụ cho công việc viết CSS được hiệu quả và tốt nhất.
Theo Bizfly Cloud chia sẻ
>> Có thể bạn quan tâm: Thủ thuật CSS và những mẹo hay dành cho developer
