Có ba bộ tiền xử lý CSS chính trên thị trường hiện nay, Sass, Less và Stylus. Trong bài đăng này, chúng tôi sẽ so sánh hai bộ tiền xử lý dường như được sử dụng rộng rãi nhất trong số các nhà phát triển, Sass vs Less. Bằng cách chuyển sang bộ tiền xử lý có thể giúp hợp lý hóa quy trình phát triển của bạn
Bộ tiền xử lý CSS là gì?
Viết CSS có thể trở thành những nhiệm vụ khá lặp đi lặp lại và nhỏ chẳng hạn như phải tra cứu các giá trị màu hex, đóng thẻ của bạn, v.v. có thể trở nên tốn thời gian. Và đó là nơi một bộ tiền xử lý phát huy tác dụng. Bộ tiền xử lý CSS về cơ bản là một ngôn ngữ kịch bản mở rộng CSS và sau đó biên dịch nó thành CSS thông thường
Ashley Nolan đã thăm dò ý kiến của các nhà phát triển trong một nghiên cứu điển hình để xem họ ưa thích bộ tiền xử lý nào hơn. 689 người đã bình chọn cho Sass trong khi Ít hơn nhận được 140 phiếu bầu
Nguồn. Khảo sát năm 2015 từ Ashleynolan. đồng. Vương quốc Anh Tuyên bố miễn trừ trách nhiệm. đây chỉ là những phản hồi từ một phần nhỏ các nhà phát triển
Và nếu chúng ta xem Google Xu hướng cho "Sass" [ngôn ngữ lập trình] và "Less" [ngôn ngữ lập trình] thì có vẻ như có nhiều hoạt động hơn với Sass
Nguồn. xu hướng Google
Ưu điểm khi sử dụng bộ tiền xử lý
Khi bạn đã thành thạo CSS, có rất nhiều lợi thế khi sử dụng bộ tiền xử lý. Một trong những điều lớn nhất có lẽ là không phải lặp lại chính mình. Nói cách khác, nó làm cho CSS của bạn trở nên khô khan
Dưới đây là một số lợi thế khác
- Mã sạch hơn với các phần và biến có thể tái sử dụng
- Tiết kiệm thời gian cho bạn
- Dễ dàng duy trì mã hơn với các đoạn mã và thư viện
- Tính toán và logic
- Có tổ chức hơn và dễ cài đặt
Sass vs ít hơn
Sass và Less đều là những tiện ích mở rộng CSS rất mạnh. Bạn có thể nghĩ về chúng giống như một ngôn ngữ lập trình được thiết kế để làm cho CSS dễ bảo trì hơn, dễ sử dụng hơn và có thể mở rộng hơn. Cả Sass và Less đều tương thích ngược nên bạn có thể dễ dàng chuyển đổi các tệp CSS hiện có của mình chỉ bằng cách đổi tên phần mở rộng tệp
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
1 thành @nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
2 hoặc @nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
3, tương ứng. Ít dựa trên JavaScript và Sass dựa trên RubyCài đặt và thiết lập
Có một số cách để cài đặt và bắt đầu sử dụng bộ tiền xử lý. Bạn có thể sử dụng ứng dụng của bên thứ ba hoặc bạn có thể cài đặt nó từ dòng lệnh
Ứng dụng bên thứ ba
Nếu bạn chỉ đang chuyển đổi sang bộ tiền xử lý thì chúng tôi thực sự khuyên bạn nên sử dụng trình biên dịch của bên thứ ba vì điều này sẽ tăng tốc mọi thứ. Dưới đây là danh sách một số cái phổ biến hơn, được liệt kê không theo thứ tự cụ thể
Nguồn. chuẩn bị
CompilerSass languageLess languageMacWindowsCodeKitKoalaHammerLiveReloadPreprosScoutCrunch
Có lẽ bạn cảm thấy thoải mái hơn với CLI, vì vậy đây là cách cài đặt Sass và Ít hơn
ngổ ngáo
Để chạy Sass, bạn cần cài đặt Ruby. Trên các phiên bản Linux và OSX mới hơn, Ruby đã được cài đặt sẵn. Bạn có thể cài đặt Sass bằng lệnh sau.
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
4Ngoài ra còn có các thư viện khác, chẳng hạn như libSass hiện đưa Sass lên NodeJS mà không cần Ruby
Trên Windows, trước tiên bạn cần cài đặt Ruby. Nếu bạn đang dùng Mac, Ruby đã được cài đặt sẵn
- Mở thiết bị đầu cuối hoặc dấu nhắc lệnh của bạn
- Cài đặt Sass bằng lệnh
4@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; }
Ít hơn
Ít hơn được viết bằng JavaScript nên bạn sẽ cần NodeJS để chạy nó
- Trên Linux và Mac, bạn có thể cài đặt nó bằng lệnh
6@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; }
- Sau đó, bạn có thể sử dụng lệnh
7 để biên dịch thành CSS@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; }
Trên Windows, bạn sẽ cần cài đặt trình cài đặt NodeJS
- Mở dấu nhắc lệnh của bạn
- Chạy
8@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; }
- Sau đó, bạn có thể sử dụng lệnh
7 để biên dịch thành CSS@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; }
Trình chỉnh sửa mã - Đánh dấu cú pháp
Sau khi bạn đã cài đặt mọi thứ, có thể bạn sẽ muốn thiết lập một plugin hoặc tiện ích mở rộng trong trình chỉnh sửa mã của mình để làm nổi bật cú pháp Sass hoặc Ít hơn với các màu phù hợp. Dưới đây là danh sách những cái phổ biến bên dưới, không theo thứ tự cụ thể
Nguồn. GitHub
Trình chỉnh sửa mãSassLessSublimeTextSass BundleLess-sublimeNotepad++Notepad-plus-plusLess-for-Notepad-plusplusVisualStudioSassyStudioCSS is LessTextMateSCSS. tmbundleLess. tmbundleEclipseNền tảng EclipseEclipse for Less
Ngoài ra còn có các khung bên thứ ba phổ biến khác mà bạn có thể sử dụng cùng với các bộ tiền xử lý, chẳng hạn như Bourbon
Biến
Với bộ tiền xử lý, bạn có lợi thế hơn so với CSS truyền thống vì bạn có thể sử dụng các biến. Bạn có thể lưu trữ những thứ như màu sắc, phông chữ hoặc bất kỳ giá trị nào bạn muốn sử dụng lại sau này. Xem các ví dụ bên dưới
Ví dụ về phông chữ Sass
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
đầu ra CSSbody {
font: 100% Helvetica, sans-serif;
color: #333;
}
Ví dụ ít màu hơn
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
đầu ra CSS#header {
color: #6c94be;
}
hỗn hợp
Mixin được sử dụng để bao gồm một loạt các thuộc tính hoặc khai báo nhóm với nhau
Ví dụ bán kính đường viền Sass
Trong Sass, bạn sử dụng
#header {
color: #6c94be;
}
0@mixin border-radius[$radius] {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius[10px];
}
đầu ra CSS.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Ví dụ thuộc tính ít đường viền hơn
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
đầu ra CSS#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
làm tổ
Nesting là một lợi thế rất lớn so với CSS vì nó tạo ra một hệ thống phân cấp trực quan, tương tự như những gì bạn đã quen với HTML. Trong các ví dụ, bạn có thể thấy lớp hoặc div cần ít sự lặp lại hơn như thế nào vì nó hiện đang theo cách tiếp cận theo tầng
ngổ ngáo
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
đầu ra CSSnav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Ít hơn
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
0đầu ra CSSbody {
font: 100% Helvetica, sans-serif;
color: #333;
}
1Nhập khẩu
CSS tiêu chuẩn
#header {
color: #6c94be;
}
1 cho phép bạn chia thành nhiều tệp. Vấn đề với điều này là nó tạo ra các yêu cầu HTTP bổ sung. Sass và Less làm việc hơi khác một chút. Thay vì tạo một yêu cầu HTTP khác, chúng kết hợp các tệp thành một. Tương tự như phép nốingổ ngáo
Giả sử bạn có một tệp tên là
#header {
color: #6c94be;
}
2. Trong #header {
color: #6c94be;
}
3 của bạn, bạn có thể đưa nó lên đầu bằng cách sử dụng cách sau. #header {
color: #6c94be;
}
4 Không cần gia hạnÍt hơn
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
2Gia hạn
Đây là một tính năng mạnh mẽ khác. Nó cho phép bạn chia sẻ các thuộc tính từ bộ chọn này sang bộ chọn khác
ngổ ngáo
Trong Sass, bạn sử dụng
#header {
color: #6c94be;
}
5body {
font: 100% Helvetica, sans-serif;
color: #333;
}
3đầu ra CSSbody {
font: 100% Helvetica, sans-serif;
color: #333;
}
4Ít hơn
Trong Ít bạn sử dụng
#header {
color: #6c94be;
}
6body {
font: 100% Helvetica, sans-serif;
color: #333;
}
5đầu ra CSSbody {
font: 100% Helvetica, sans-serif;
color: #333;
}
6hoạt động
Không giống như CSS, bạn có thể thực hiện tất cả các loại thao tác trong cả Sass và Less
Ví dụ tính toán lưới Sass
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
7đầu ra CSSbody {
font: 100% Helvetica, sans-serif;
color: #333;
}
8Ví dụ căn bậc hai nhỏ hơn
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
9đầu ra CSS@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
0Đó chỉ là một vài trong số những lợi ích bạn nhận được từ việc sử dụng bộ tiền xử lý. Hầu hết các ví dụ trên được lấy từ tài liệu chính thức của Sass and Less
Phát triển tích cực
Cả Sass và Less đều hoạt động khá tích cực trên GitHub, bạn có thể xem một số hoạt động gần đây bên dưới
Hoạt động GitHubSassÍt hơn# vấn đề đang mở138208# yêu cầu kéo đang chờ xử lý118# cam kết trong 30 ngày qua2912
Bản tóm tắt
Như bạn có thể thấy, các bộ tiền xử lý CSS rất mạnh và chúng có thể giúp hợp lý hóa quá trình phát triển của bạn, đặc biệt nếu bạn có nền tảng lập trình. Mặc dù có vẻ như Sass được sử dụng rộng rãi hơn, nhưng thực sự không có bộ tiền xử lý nào tốt hơn bộ tiền xử lý kia. Nó thường thuộc về nhà phát triển và những gì họ cảm thấy thoải mái khi sử dụng. Cả hai đều có các tiện ích mở rộng giàu tính năng có thể giúp CSS của bạn dễ bảo trì, dễ sử dụng và có thể mở rộng hơn