Nên chọn SCSS hay Sass cho dự án tiếp theo của bạn?

Tôi đã viết nhiều về Sass, nhưng một vài bình luận gần đây cho thấy mọi người không biết chính xác Sass là gì. Dưới đây là một giải thích ngắn gọn:

Khi chúng ta nói về Sass, chúng ta thường ám chỉ tới preprocessor (bộ tiền xử lý) và ngôn ngữ lập trình. Ví dụ như, “chúng tôi đang sử dụng Sass”, hoặc “đây là một Sass mixin”. Trong đó, Sass (preprocessor) cho phép 2 loại cú pháp khác nhau:

Sass, cũng được biết đến như cú pháp thụt đầu dòng (indented syntax)
SCSS, một cú pháp giống CSS

Lịch sử

Ban đầu, Sass là một phần của một preprocessor khác gọi là Haml (dành cho HTML), được thiết kế và viết bởi các lập trình viên Ruby. Bởi vậy, Sass stylesheets sử dụng cú pháp giống như Ruby với việc không có các dấu ngoặc nhọn {}, dấu chấm phẩy ; và thụt đầu dòng nghiêm ngặt, giống như thế này:

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius

.my-element
    color= !primary-color
    width= 100%
    overflow= hidden

.my-other-element
    +border-radius(5px)

Như bạn có thể thấy, điều này thay đổi khá nhiều khi so với CSS! Thậm chí nếu bạn là một người sử dụng Sass (preprocessor), bạn cũng có thể thấy điều này khá khác so với cái chúng ta đã sử dụng. Biến được báo hiệu với dấu ! không phải $, phép gán là = không phải :. Khá lạ lẫm.

Sass giống như vậy cho đến khi phiên bản 3.0 được phát hành vào tháng 5/2010, nó giới thiệu một cú pháp mới được gọi là SCSS (Sassy CSS). Cú pháp này nhằm thu hẹp khoảng cách giữa Sass và CSS bằng cách mang tới một cú pháp thân thiện với CSS.

// Variable
$primary-color: hotpink;

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

.my-element {
    color: $primary-color;
    width: 100%;
    overflow: hidden;
}

.my-other-element {
    @include border-radius(5px);
}

SCSS gần với CSS hơn Sass. Điều đáng nói là, những người duy trì Sass cũng cố gắng để 2 cú pháp gần với nhau hơn bằng cách đổi ! (dấu hiệu đây là biến) và = (phép gán) từ cú pháp thụt đầu dòng (indented syntax) thành $ và : trong SCSS.

Bây giờ, khi bắt đầu một dự án mới, bạn có thể tự hỏi mình nên sử dụng loại cú pháp nào? Hãy để tôi giúp bạn thấy ưu và nhược điểm của mỗi loại cú pháp.

Ưu điểm cú pháp thụt đầu dòng của Sass (indented syntax)

Mặc dù cú pháp này có thể trông khá lạ, nhưng nó có một vài điểm khá thú vị. Đầu tiên, nó ngắn và dễ dàng đánh máy hơn. Không cần dấu ngoặc nhọn và chấm phẩy. Thậm chí còn tốt hơn nữa, khi không cần @mixin hoặc @include, bạn chỉ cần một ký tự là đủ: : và +.

Cú pháp Sass bắt buộc code theo các chuẩn dựa trên thụt đầu dòng. Vì vậy sai một thụt đầu dòng có thể làm hỏng cả .sassstylesheet, nó đảm bảo rằng code phải rõ ràng và được định dạng tốt.

Nhưng hãy cẩn thận! Thụt đầu dòng có một vài ý nghĩa trong Sass. Khi thụt đầu dòng một bộ chọn (selector), có nghĩa là nó được lồng trong bộ chọn trước đó. Ví dụ:

.element-a
    color: hotpink

    .element-b
        float: left

sẽ được biên dịch thành code CSS như sau:

.element-a {
    color: hotpink;
}

.element-a .element-b {
    float: left;
}

Chỉ cần một thao tác đơn giản là thụt đầu dòng .element-b vào một level, nó sẽ trở thành con của .element-a, điều này thay đổi code CSS sau khi biên dịch. Vì vậy, hãy cẩn thận với thụt đầu dòng.

Ưu điểm của cú pháp SCSS

Để bắt đầu, nó hoàn toàn tương thích với CSS. Điều này nghĩa là, bạn có thể đổi tên một file CSS thành .scss và nó sẽ làm việc. Làm cho SCSS tương thích hoàn toàn với CSS luôn luôn là ưu tiên của những người duy trì Sass, và đây là một điều tuyệt vời theo quan điểm của tôi. Hơn nữa, họ cũng cố gắng để nó có thể trở thành một cú pháp CSS hợp lệ trong tương lai.

Bởi vì SCSS tương thích với CSS, nên bạn sẽ dễ dàng học nó hơn. Với những gì bạn đã biết thì SCSS chỉ là CSS với một vài mở rộng. Điều này khá quan trọng với những lập trình viên chưa có kinh nghiệm: họ có thể nhanh chóng bắt đầu làm việc mà không cần biết trước về Sass.

Hơn nữa, nó cũng dễ đọc hơn vì nó thực sự có ý nghĩa. Khi bạn đọc @mixin, bạn biết nó là một khai báo mixin, khi bạn nhìn thấy @include, bạn biết đây là một lời gọi mixin. Nó không có bất kỳ ký tự viết tắt nào, mọi thứ đều có ý nghĩa khi đọc thành tiếng.

Vì thế, gần như tất cả các công cụ, plugin và demo cho Sass đều sử dụng cú pháp SCSS. Theo thời gian, cú pháp này trở nên nổi bật và là sự lựa chọn mặc định, chủ yếu vì những lý do ở trên. Một ví dụ, là khá khó để tìm một plugin highligh tốt cho Sass, còn SCSS thì luôn có rất nhiều.