Viết CSS hiệu quả hơn với Sass

Bài viết liên quan

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. Bài viết này 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.

Sass là gì?

Sass (viết tắt của Syntactively Awesome Style Sheets) là một phần mở rộng của CSS cho phép bạn sử dụng các tính năng như biến (variable), quy tắc lồng nhau (nested rule, mixin,... Sử dụng Sass giúp bạn viết CSS nhanh hơn, với thứ tự rõ ràng, định nghĩa và quản lý các biến, tự động nén tệp tin CSS, v.v.

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 tổng hợp

>> Có thể bạn quan tâm: Thủ thuật CSS và những mẹo hay dành cho developer

BizFly Cloud là hệ sinh thái điện toán đám mây được vận hành bởi VCCorp - Công ty dẫn đầu trong lĩnh vực công nghệ và truyền thông tại Việt Nam. Với đội ngũ kỹ thuật viên trình độ cao và kinh nghiệm lâu năm làm việc trên các công nghệ khác nhau như cloud, mobile, web..., chúng tôi có đủ khả năng để hỗ trợ đưa ra những giải pháp và công nghệ toàn diện giúp doanh nghiệp chuyển đổi số thành công. Dành cho độc giả quan tâm tới các dịch vụ đám mây do BizFly Cloud cung cấp có thể truy cập tại đây.
Registration Login
Sign in with social account
or
Lost your Password?
Registration Login
Sign in with social account
or
A password will be send on your post
Registration Login
Registration