Sass là gì? Sử dụng Sass để viết CSS như thế nào?
Sass là gì? Đó là câu hỏi mà chúng ta sẽ trả lời trong bài viết này cùng Bizfly Cloud. Nếu bạn mới làm quen với thiết kế web, có lẽ bạn đã nghe thấy thuật ngữ này ở đâu đó, nhưng bạn chưa hiểu chính xác Sass là gì, có tác dụng như thế nào và bạn có nên sử dụng nó hay không.
Giới thiệu
Trong quá trình dựng giao diện cho website bằng CSS, web developer có thể gặp rất nhiều những đoạn code giống nhau cần sử dụng lặp lại nhiều lần, hoặc một vài mã màu cần sử dụng nhiều lần nhưng khó nhớ. Khi đó, chắc hẳn bạn sẽ cần một công cụ có thể giải quyết các vấn đề trên giúp cho việc viết CSS dễ dàng và nhanh chóng hơn. Một trong những công cụ phổ biến nhất là Sass.
Sass là một CSS preprocessor (bộ tiền xử lý CSS), nó bổ sung các tính năng đặc biệt như các biến (variables), quy tắc lồng nhau (nested rules) và mixins vào CSS thông thường. Mục đích là để làm cho quá trình viết CSS đơn giản và hiệu quả hơn.
Để hiểu cụ thể hơn, ta hãy tìm hiểu chi tiết.
Bộ tiền xử lí CSS
Một bộ tiền xử lí CSS (preprocessor) là một ngôn ngữ mở rộng CSS bằng cách cho phép developer viết code bằng một ngôn ngữ rồi sau đó dịch sang CSS. Ngoài Sass, có một vài bộ tiền xử lí khác trên thị trường như Less hay Stylus.
Sass là gì?
Sass (Syntactically awesome stylesheets) là một phần mở rộng của CSS cho phép bạn sử dụng các công cụ như biến (variables), các quy tắc lồng ghép (nested rules), inline imports và nhiều tính năng khác. Nó cũng giúp bạn quản lý code CSS tốt hơn và tạo style sheets nhanh hơn.
Sass tương thích với mọi phiên bản CSS. Yêu cầu duy nhất khi sử dụng Sass là bạn phải cài đặt Ruby.
Lợi ích khi sử dụng Sass
- Viết CSS nhanh hơn, tiết kiệm thời gian làm việc
- Cung cấp nhiều công cụ mạnh mẽ như variables, inline imports, nesting rules,...
- Dễ dàng quản lý code CSS một cách khoa học
- Tương thích hoàn toàn với mọi phiên bản CSS
- Tổ chức file khoa học, thuận tiện cho bảo trì và sửa chữa.
- Sử dụng Sass
Sass có thể được sử dụng theo 3 cách: như một công cụ sử dụng command-line, như một module Ruby độc lập, và như một plugin cho các Rack framework, bao gồm Ruby on Rails và Merb.
Cài đặt
Để cài đặt Sass, ta chạy lệnh sau:
gem install sass
Để chạy Sass từ command line, sử dụng:
sass input.scss output.css
Để theo dõi các files Sass và thực hiện việc update các CSS mỗi khi các Sass file đó thay đổi:
sass --watch input.scss:output.css
Tiếp theo, chúng ta sẽ tìm hiểu một vài mẹo cơ bản để sử dụng Sass hiệu quả. Để các bạn dễ hiểu thì tất cả đều có ví dụ thực tế.
Cú pháp (syntax)
Sass có 2 lựa chọn cú pháp:
SCSS (Sassy CSS): sử dụng file có đuôi .scss hoàn toàn tương thích với cú pháp trong CSS.
Indented (thường gọi là 'Sass'): sử dụng file đuôi .sass và thụt lề thay cho dấu ngoặc nhọn {}; mặc dù không hoàn toàn tương thích với CSS nhưng ưu điểm của loại cú pháp này là có thể viết rất nhanh => Tiết kiệm thời gian viết.
Ta có thể chuyển đổi qua lại giữa 2 cú pháp trên bằng cách sử dụng lệnh sass-convert.
Các biến (variables)
Giống như nhiều ngôn ngữ khác, Sass cho phép bạn sử dụng các biến để lưu trữ thông tin và sử dụng lại chúng trong suốt quá trình làm việc với style sheet.
Ví dụ, bạn có thể lưu trữ một mã màu trong một biến ở phần đầu của file, sau đó sử dụng lại biến này để gán màu cho các phần tử khác.
Điều này có nghĩa là bạn có thể nhanh chóng thay đổi màu sắc có nhiều phần tử cùng lúc mà không cần sửa từng dòng code.
Ví dụ khi bạn viết trong Sass:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body { font: 100% $font-stack;
color: $primary-color; }
Những dòng CSS dưới đây sẽ được tạo ra:
body {
font:100% Helvetica, sans-serif;
color:#333;
}
Lồng ghép (Nesting)
Nesting là một con dao hai lưỡi. Mặc dù nó cung cấp một giải pháp tuyệt vời để giảm thiểu số lượng code cần viết, nhưng nó cũng có thể dẫn đến tình trạng overqualified CSS nếu người sử dụng thiếu kinh nghiệm và sử cẩn trọng.
Ý tưởng của nesting là lồng các vùng chọn CSS của bạn theo cách bắt chước hệ thống phân cấp HTML.
Để hiểu hơn về Nesting, hãy xem xét ví dụ sau.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a { display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Đây là một navigation style sử dụng nesting. Kết quả sẽ cho ra CSS như sau:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Như đã đề cập, nesting là một con dao hai lưỡi và nhiều web developer không có thiện cảm với nesting. Họ thà không sử dụng tính năng này còn hơn đối mặt với các rủi ro mà nesting gây ra cho file CSS. Bạn có thể tham khảo bài viết này để hiểu được tác hại khi sử dụng nesting một cách thiếu hiệu quả.
Partials
Partials (các phần) là các tệp Sass nhỏ hơn có thể được nhập vào các tệp Sass khác. Để dễ hiểu thì partials như các đoạn mã. Với các đoạn mã này, CSS của bạn có thể được mô-đun hóa khiến cho nó dễ quản lý và bảo trì hơn. Mỗi một phần được chỉ định bằng cách đặt tên với dấu gạch dưới: _partial.scss.
Import
Lệnh @import cho phép bạn nhập các file partials vào file hiện tại để xây dựng một file CSS duy nhất. Lưu ý là bạn sử dụng bao nhiêu imports thì sẽ có bấy nhiêu HTTP request được sinh ra.
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
Theo Bizfly Cloud chia sẻ
>> Có thể bạn quan tâm: 7 đơn vị CSS có thể bạn chưa biết
