So sánh SASS vs LESS(CSS Preprocessors)

CSS Preprocessors là gì?

CSS Preprocessors được hiểu là ngôn ngữ tiền xử lý 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.
  

Và một số CSS Preprocessor khác như : Clay, DtCSS, Switch CSS.

Ở bài viết này, mình sẽ giới thiệu về 2 CSS Preprocessors phố biến nhất. Đó là SASS và Less cũng như đưa ra ưu và nhược điểm của 2 CSS Preprocessors này.

 Google Trends

Vào năm 2015 Ashley Nolan đã cho một số nhà phát triển bỏ phiếu trong một nghiên cứu nhỏ để đưa ra CSS Preprocessors mà họ ưa thích. Có 66.0% người chọn Sass và 13.4% chọn Less cho các dự án của mình.

Vậy ta có thể biết được một cách tương đối rằng SASS và LESS là 2 CSS Preprocessors được sử dụng phổ biến nhất. Cả 2 đều là các phần mở rộng CSS rất mạnh, chúng có tính tương thích ngược vì vậy bạn có thể chuyển đổi các tập tin CSS của bạn bằng cách đổi tên tệp .css thành .sass, .less hay .scss tương ứng.

LESS được xây dựng dựa trên Javascript còn SASS dựa trên Ruby.

Cài đặt

Việc sử dụng chúng rất đơn giản, chúng ta chỉ cần drag and drop folder hoặc file cần biên dịch, sau đó những phần mềm đó sẽ làm công việc của chúng, chúng ta sẽ có được file .css chúng ta cần từ những file .sass, .scss, .less.

1. Mở cmd
2. Chạy npm install less
3. Bạn có thể sử dụng cmd để biên dịch lessc styles.less styles.css

So sánh giữa Less và Sass

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
 color: $primary-color;
 font: 100% $font-stack;
}

CSS output

body {
 font: 100% Helvetica, sans-serif;
 color: #333;
}

Biến trong Less sử dụng @ ở đầu:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
 color: @light-blue;
}

CSS output

#header {
 color: #6c94be;
}

@mixin border-radius($radius) {
 -webkit-border-radius: $radius;
 -moz-border-radius: $radius;
 border-radius: $radius;
 -ms-border-radius: $radius;
}

.box { @include border-radius(10px); }

CSS output

.box {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -ms-border-radius: 10px;
}

Ví dụ mixin trong Less

.bordered {
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

#menu a {
 color: #111;
 color: red;
 .bordered;
}

.post a {
 .bordered;
}

CSS output

#menu a {
 color: #111;
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

.post a {
 color: red;
 border-bottom: solid 2px black;
 border-top: dotted 1px black;
}

// Variables
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";

.message {
 border: 1px solid #ccc;
 padding: 10px;
.success {
 color: #333;
}

 border-color: green;
 @extend .message;
}

.error {
 border-color: red;
 @extend .message;
}

.warning {
}
 @extend .message;
 border-color: yellow;

CSS output

.message, .success, .error, .warning {
 border: 1px solid #cccccc;
.success {
 padding: 10px;
 color: #333;
}

 border-color: red;
 border-color: green;
}

.error {
}

.warning {
}
 border-color: yellow;

Ở Less sử dụng :extend

nav ul {
 &:extend(.inline);
 background: blue;
 color: red;
}
.inline {
}

CSS output

nav ul {
 background: blue;
}
.inline,
 color: red;
nav ul {
}

@each $name in 'save' 'cancel' 'help' {
    .icon-#{$name} {
        background-image: url('/images/#{$name}.png');
    }
}

CSS output

/* compiled CSS */
.icon-save {
  background-image: url("/images/save.png");
}
.icon-cancel {
  background-image: url("/images/cancel.png");
}
.icon-help {
  background-image: url("/images/help.png");
}

@function make-greener($value) {
    @return $value + rgb(0,50,0);
}
p {
    background: make-greener(gray);
}

CSS output

/* compiled CSS */
p {
  background: #80b280;
}

Kết luận

Về cơ bản thì Sass và Less đều giống nhau, nó chỉ khác nhau ở cú pháp. Hiện Sass vẫn đang được phát triển trên nền của Ruby, còn Less thì được chuyển sang phát triển trên Nodejs. Chúng đều là những CSS Preprocessors rất mạnh mẽ và được sử dụng rộng rãi vì những tiện ích chúng mang lại. Trên đây là ý kiến cá nhân của mình về 2 CSS Preprocessors phổ biến hiện nay, và mình đang sử dụng Sass cho các dự án mình tham gia vì những ưu điểm của nó.