Chắc hẳn bạn đã nghe qua về Sát (SASS)??
Vậy SASS CSS là gì? Mọi thứ bạn cần biết về CSS Preprocessor và tại sao bạn nên sử dụng SASS?
Mình sẽ chỉ cho bạn biết trong bài viết này.
Nói một cách ngắn gọn nhất: Sass là một bộ tiền xử lý CSS (CSS Preprocessor), bổ sung các tính năng đặc biệt như biến, quy tắc lồng nhau và mixin (đôi khi được gọi là đường cú pháp) 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.
Nào, bây giờ hãy khám phá chi tiết hơn…
CSS Preprocessor là gì?
CSS Preprocessor (Bộ tiền xử lý CSS) là ngôn ngữ kịch bản mở rộng của CSS.
Bằng cách cho phép các lập trình viên viết CSS bằng một ngôn ngữ và sau đó biên dịch nó thành CSS. Sass có lẽ là bộ tiền xử lý phổ biến nhất hiện tại, nhưng cũng có các phương án thay thế phổ biến khác như: Less, Stylus
Trước khi chúng ta tiếp tục, mình cảm thấy cần cảnh báo một chút: Nếu bạn chưa quen với CSS, thì mình khuyên bạn đừng tìm đến bộ tiền xử lý nào như SASS.
Cũng tương tự như các Framework và Extension khác. Mặc dù đúng là nó cung cấp nhiều lợi thế về tốc độ và hiệu quả, nhưng điều quan trọng hơn là trước tiên bạn phải hiểu những điều cơ bản về CSS.
Hãy chắc chắn rằng bạn đã học các khái niệm CSS cốt lõi trước chúng ta tiếp tục nhé.
SASS là gì?
SASS (Viết tắt củaSyntactively Awesome Style Sheets) là một phần mở rộng của CSS cho phép bạn sử dụng những thứ như biến, quy tắc lồng nhau, inline import và hơn thế nữa.
Nó cũng giúp giữ CSS ngăn nắp và cho phép bạn tạo CSS nhanh hơn.
Sass tương thích với tất cả các phiên bản CSS. Yêu cầu duy nhất để sử dụng nó là bạn phải cài đặt Ruby. Người dùng cũng được yêu cầu tuân theo Nguyên tắc cộng đồng Sass. (Xem tại đây)
Làm thế nào để sử dụng SASS
Trong phần này, mình sẽ phác thảo một số mẹo cơ bản để sử dụng Sass, sử dụng các ví dụ từ trang web chính thức của Sass.
Bạn có thể xem Tài liệu Sass để tham khảo thêm và ví dụ.
http://sass-lang.com/documentation/file.SASS_REFERENCE.htmlCú pháp SASS
Sass bao gồm hai tùy chọn cú pháp như sau:
- SCSS (Sassy CSS): Sử dụng phần mở rộng tệp .scss và hoàn toàn tuân thủ cú pháp CSS
- Indented (gọi đơn giản là ‘Sass’): Sử dụng phần mở rộng .sass và thụt lề thay vì sử dụng dấu ngoặc. Nó không hoàn toàn tuân thủ cú pháp CSS, nhưng viết nhanh hơn
Lưu ý rằng các tệp có thể được chuyển đổi từ cú pháp này sang cú pháp khác bằng lệnh sass-convert.
Biến trong SASS
Cũng giống như các ngôn ngữ lập trình khác, Sass cho phép sử dụng các biến có thể lưu trữ thông tin để bạn có thể sử dụng sau đó.
Ví dụ: Bạn có thể lưu trữ một giá trị màu trong một biến ở đầu tệp và sau đó sử dụng biến này khi muốn thiết lập màu cho các phần tử của bạn.
Điều này cho phép bạn nhanh chóng thay đổi màu sắc của mình mà không phải sửa đổi từng dòng riêng biệt.
Ví dụ về biến trong SASS:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}CSS tương đương như sau:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}Nesting (Lồng nhau) trong SASS
Nesting là một con dao hai lưỡi. Mặc dù nó cung cấp một phương pháp tốt để giảm số lượng code bạn cần viết, nhưng nó cũng có thể dẫn đến CSS quá mức nếu không được làm cẩn thận.
Ý tưởng là lồng các bộ chọn CSS của bạn theo cách bắt chước hệ thống phân cấp HTML.
Ví dụ sau đây sẽ cho bạn thấy cách lồng nhau trong SASS:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}Đoạn code trên tương đương 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;
}Partials trong SASS
Partials là các tệp Sass nhỏ hơn có thể được nhập (xem phần tiếp theo) vào các tệp Sass khác.
Hãy tưởng tượng về partials như đoạn code. Với các đoạn code này, CSS của bạn giờ đây có thể được mô đun hóa và dễ bảo trì hơn.
Partials được chỉ định như vậy bằng cách đặt tên với dấu gạch dưới ở đầu: _partial.scss.
Import trong SASS
Được sử dụng với Partials (xem phần trước), sử dụng @import cho phép bạn nhập các tệp partials của mình vào tệp hiện tại, để tạo một tệp CSS duy nhất.
Lưu ý: Hãy chú ý đến số lượng import mà bạn đang sử dụng sẽ giống như mỗi một request HTTP.
Tạo một file reset CSS với phần mở rộng _reset.scss
/ _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}Ta import file reset vào khi cần thiết
// basefile.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}CSS trên tương ứng như sau:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}Lưu ý: Khi import các partials, bạn không cần .scss hay dấu gạch dưới “_”
Mixins
Một trong những lợi thế của việc sử dụng các bộ tiền xử lý là khả năng lấy mã phức tạp, dài dòng và đơn giản hóa nó. Đây chính là sự hữu ích của mixins!
Ví dụ: Nếu bạn cần css bao gồm các vendor prefixes, bạn có thể sử dụng một mixin thay thế. Hãy xem ví dụ này cho border-radius:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }Lưu ý: @mixin ở trên cùng. Nó đã được đặt tên là border-radius và sử dụng biến $radius làm tham số. Biến này được sử dụng để đặt giá trị bán kính cho mỗi phần tử.
Sau đó, lệnh @include được gọi, cùng với tên mixin (border-radius) và một tham số $radius là 10px. Do đó, đoạn code này:
.box {include Border-radius (10px);}.tương đương với đoạn code này:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}Extend/Inheritance trong SASS
Lệnh extend đã được gọi là một trong những tính năng mạnh nhất của Sass. Sau khi thấy nó hoạt động, rõ ràng tại sao.
Ý tưởng là, bạn sẽ không phải include nhiều tên class trên các thành phần HTML của mình và có thể giữ mã của bạn luôn DRY.
Bộ chọn của bạn có thể kế thừa style của các bộ chọn khác, và sau đó dễ dàng được mở rộng khi có yêu cầu. Thật mạnh mẽ đúng không?
Toán tử trong SASS
Có khả năng thực hiện các phép tính trong CSS cho phép bạn thực hiện nhiều hơn, như chuyển đổi giá trị pixel thành tỷ lệ phần trăm.
Bạn sẽ có quyền truy cập vào các hàm toán học tiêu chuẩn như cộng, trừ, nhân và chia. Tất nhiên, các chức năng này có thể được kết hợp để tạo ra các tính toán phức tạp.
Ngoài ra, Sass bao gồm một vài hàm tích hợp sẵn để giúp thao tác với number. Các hàm như percentage(), floor() và round()…
Tổng kết
Như vậy là bạn đã hiểu về SASS là gì và cách viết CSS theo chuẩn SASS giúp tăng tốc độ lập trình Front-End, bảo trì code CSS dễ dàng hơn..
Các dự án chuyên nghiệp đều yêu cầu có sử dụng SASS hoặc bộ tiền xử lý nào đó. Hãy học SASS nếu muốn ứng tuyển vào công ty lớn hoặc Outsourcing nhé.
