CSS Preprocessors được hiểu là ngôn ngữ tiền xử lý CSS. Đây là một ngôn ngữ kịch bản mở rộng của CSS và được biên dịch thành cú pháp CSS, nó có nhiệm vụ logic hóa mã CSS sao cho gần giống với ngôn ngữ lập trình. Việc viết CSS Preprocessors mang lại một số lợi ích sau:
- Tiết kiệm thời gian viết CSS.
- Dễ dàng bảo trì và phát triển.
- Có tính linh hoạt và tái sử dụng cao.
- Các tập tin, đoạn mã CSS được tổ chức, sắp xếp một cách rõ ràng.
Bằng cách sử dụng ngôn ngữ tiền xử lý, bạn có thể tăng năng suất của bạn và giảm số lượng mã bạn đang viết trong một dự án. Hiện nay có nhiều ngôn ngữ tiền xử lý được được biết đến nhưng developers hay sử dụng như Sass, Less, Stylus. Việc ra đời của ngôn ngữ tiền xử lý làm cho Native CSS đang bị thu hẹp khoảng cách. Chúng ta hãy xem Preprocessors hữu ích cho chúng ta thay đổi cách làm mọi thứ như thế nào.
Table of Contents
Mixins
Mixins là core của ngôn ngữ tiền xử lý, dùng để nhóm khai báo CSS mà bạn có thể tái sử dụng trong suốt dự án. Một mixin có thể được sử dụng như một helper độc lập, hoặc bạn có thể truyền tham số vào để làm cho nó thêm linh hoạt.
// SASS
@mixin bordered($width) {
border: $width solid #ddd;
&:hover {
border-color: #999;
}
}
h1 {
@include bordered(5px);
}
// LESS
.bordered (@width) {
border: @width solid #ddd;
&:hover {
border-color: #999;
}
}
h1 {
.bordered(5px);
}
// Stylus bordered(w) border: n solid #ddd &:hover border-color: #999 h1 bordered(5px)
Math
Sử dụng cho số học hoặc chuyển đổi đơn vị tiêu chuẩn. Sass và Stylus hỗ trợ số học giữa các đơn vị khác nhau. Ngoài toán học đơn giản, trước khi xử lý cũng có hỗ trợ toán học phức tạp như trần, làm tròn, nhận được tối thiểu hoặc giá trị tối đa trong một danh sách…
// SASS 1cm * 1em => 1 cm * em 2in * 3in => 6 in * in (1cm / 1em) * 4em => 4cm 2in + 3cm + 2pc => 3.514in 3in / 2in => 1.5
// LESS 1cm * 1em => 1cm * 1em 2in * 3in => 6in (1cm / 1em) * 4em => 4cm 2in + 3cm + 2pc => 3.514in 3in / 2in => 1.5in
// Stylus 1cm * 1em => 1 cm * em 2in * 3in => 6in (1cm / 1em) * 4em => 4cm 2in + 3cm + 2pc => 5.181in 3in / 2in => 1.5in
Variables
Variables được khai báo và sử dụng trong suốt stylesheet. Mỗi developer muốn định nghĩa màu cơ bản và sử dụng nó trên tất cả các tập tin CSS, thay vì viết mã hex hoặc tên màu thì có thể đặt tên biến cho mỗi lần sử dụng. Giống như “color”, biến còn cần cho “width”, “font-size”, “font-family”, “borders”…
Biến trong SASS bắt đầu với kí tự $, trong LESS kí tự @ và không có ký tự trong Stylus. SASS và LESS giá trị này được gán với dấu “:” và với dấu “=” trong Stylus.
// SASS
$font-size: 16px;
div {
font-size: $font-size;
}
// LESS
@font-size: 16px;
div {
font-size: @font-size;
}
// Stylus font-size = 16px div font-size font-size
// CSS
div {
font-size: 16px;
}
Nested
CSS thiếu tính phân cấp trong khi làm việc với selector con của nó. Bạn phải viết selectors và sự kết hợp của chúng trong nhưng dòng riêng biệt. Sự ra đời của Nesting là hệ thống phân cấp như trong HTML và làm tăng khả năng đọc và dễ dàng trong quản lý code của bạn.
// SASS
$link-color: #999;
$link-hover: #229ed3;
ul {
margin: 0;
li {
float: left;
}
a {
color: $link-color;
&:hover {
color: $link-hover;
}
}
}
// LESS
@link-color: #999;
@link-hover: #229ed3;
ul {
margin: 0;
li {
float: left;
}
a {
color: @link-color;
&:hover {
color: @link-hover;
}
}
}
// Stylus link-color = #999 link-hover = #229ed3 ul margin 0 li float left a color link-color &:hover color link-hover
// CSS
ul { margin: 0; }
ul li { float: left; }
ul a { color: #999; }
ul a:hover { color: #229ed3; }
Extend
Extends thực sự hữu ích, nó cho bạn kế thừa, chia sẻ định nghĩa chung với các selectors hơn là sao chép chúng. Tất cả các selectors mở rộng được nhóm lại trong biên dịch CSS. Phần này cá nhân mình thích sử dụng @extend ở SASS hơn vì nó thể hiện rõ ràng selector.
// SASS
.block { margin: 10px 5px; }
p {
@extend .block;
border: 1px solid #eee;
}
ul, ol {
@extend .block;
text-transform: uppercase;
}
// LESS
.block { margin: 10px 5px; }
p {
&:extend(.block);
border: 1px solid #eee;
}
ul, ol {
&:extend(.block);
text-transform: uppercase;
}
// Stylus .block margin 10px 5px p @extend .block border 1px solid #eee ul ol @extend .block text-transform uppercase
// CSS
.block, p, ul, ol { margin: 10px 5px; }
p { border: 1px solid #eee; }
ul, ol { text-transform: uppercase; }
Color
Hầu hết ngôn ngữ tiền xử lý này đều có chức năng màu để xử lý colors. Bạn có thể làm làm sáng hay tối hơn màu basic hoặc bão hòa nó, thậm chí bạn có thể mix hai hay nhiều colors khác nhau. Tính năng này không quá cần thiết nhưng thật tốt để có khi bạn cần dùng.
// SASS saturate($color, $amount) desaturate($color, $amount) lighten($color, $amount) adjust-hue($color, $amount) opacify($color, $amount) transparentize($color, $amount) mix($color1, $color2[, $amount]) grayscale($color) complement($color)
// LESS saturate(@color, @amount) desaturate(@color, @amount) lighten(@color, @amount) fade(@color, @amount) spin(@color, @amount) mix(@color1, @color2, @weight) grayscale(@color) contrast(@color)
// Stylus red(color) green(color) alpha(color) dark(color) light(color) hue(color) saturation(color) lightness(color)
Kết luận
Chắc hẳn qua bài viết này bạn đã hiểu CSS Preprocessor là gì? SASS là gì? LESS là gì? Stylus là gì? Và sự cần thiết của CSS Preprocessor trong quá trình làm frontend developer. Hi vọng bạn sẽ có được kiến thức cơ bản về chúng để lựa chọn cho mình một CSS Preprocessor phù hợp.
Previous post