CSS PreProcessors: Sass, Less and Stylus

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.

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.

Comments

Let’s make a great impact together

Be a part of BraveBits to unlock your full potential and be proud of the impact you make.