Sass là gì? Lợi ích của việc sử dụng Sass trong thiết kế web

Nếu có một ngày, bạn cảm thấy cách viết CSS như bình thường là hết sức nhàm chán. Bạn mong muốn có một công cụ hay một thứ gì đó có thể thay đổi được cách viết này. Bạn muốn đưa kỹ năng CSS của mình lên một giới hạn mới theo cách chuyên nghiệp. Lúc này, Sass là dành cho bạn!

Sass là gì?

Đầu tiên, Sass (Syntactically Awesome StyleSheets) là một CSS preprocessor. Nó được thiết kế bởi Hampton Catlin và phát triển bởi Nathan Weizenbaum và Chris Eppstein. Hiểu đơn giản CSS preprocessor là một ngôn ngữ kịch bản mở rộng của CSS. Nó cho phép developer viết mã từ một ngôn ngữ nào đó. Ngôn ngữ đó ở đây chính là Sass. Sau đó biên dịch nó thành CSS. Nếu trước đó bạn đã từng nghe về Sass, hoặc từng nghe về LESS, Stylus,… chúng cũng là các CSS preprocessor và được việt hóa bằng một cái tên rất hoành tráng: “ngôn ngữ tiền xử lý CSS”.

Còn Sass thì sao? Nó là một phần mở rộng của CSS. Sass cung cấp rất nhiều quy tắc giúp quản lý CSS theo thứ tự rõ ràng và dễ dàng chỉnh sửa tái sử dụng. Một số quy tắc nổi bật có thể kể đến như là biến (variables), kế thừa (selector inheritance), hàm (functions),… Với các quy tắc này, các bạn có thể đang tưởng tượng đến một ngôn ngữ lập trình. Chính xác là Sass đang làm nhiệm vụ logic hóa và cấu trúc các đoạn mã CSS sao cho nó gần với ngôn ngữ lập trình nhất có thể.

Đặc biệt Sass hoàn toàn tương thích với cú pháp CSS. Nghĩa là nếu bạn đã biết CSS trước đó, việc ứng dụng Sass cũng giống như ta đang tổ chức lại mã nguồn CSS sao cho nó logic nhất có thể mà thôi.

Lợi ích gì khi sử dụng Sass?

Từ cách sử dụng biến như ngôn ngữ lập trình

Như đã giới thiệu, các quy tắc từ Sass sẽ giúp chúng ta logic hóa các đoạn mã CSS. Tức là làm sao cho nó gần với ngôn ngữ lập trình. Mà khái niệm cơ bản nhất của một ngôn ngữ lập trình hầu như lúc nào cũng chính là biến. Sass cũng vậy. Với biến, chúng ta dễ dàng lưu trữ thông tin giá trị của thuộc tính CSS. Sau đó sử dụng ở bất cứ nơi nào cần thiết. Như ví dụ sau:

$font-stack: Arial, Helvetica, sans-serif;
$font-size: 16px;
body {
font: 100% $font-stack;
font-size: $font-size;
}

Đây là một ví dụ về cách sử dụng biến trong Sass. Ta chỉ cần khai báo font-stack và font-size một lần mà thôi. Khi cần sử dụng, ta chỉ việc đưa biến đó vào đúng vị trị mong muốn. Đây là mã nguồn sau khi biên dịch:

body {
font: 100% Arial, Helvetica, sans-serif;;
font-size: 16px;
}

Đương nhiên, đã gọi là biến thì nó hoàn toàn có thể thay đổi giá trị. Giả sử với ví dụ sau:

$font-size: 16px;
$h1-size: $font-size + 20;
h1 {
font-size: $h1-size;
}

Mã nguồn CSS sau khi biên dịch:

h1 {
font-size: 36px;
}

Đến vô vàn các ưu điểm khác

Như các bạn thấy, chỉ với quy tắc biến ta đã có thể tái cấu trúc lại mã nguồn CSS một cách logic, rõ ràng. Ngoài ra, việc khai báo biến như vậy giúp chúng ta tránh được việc viết đi viết lại một đoạn mã CSS. Từ đó, giúp tiết kiệm thời gian viết mã, tăng năng suất và nhanh chóng hoàn thành sản phẩm. Chưa hết, việc cấu trúc như vậy còn giúp mã nguồn rõ ràng hơn, giúp dễ bảo trì và phát triển,…

Đó là một trong những lợi ích chỉ với việc sử dụng biến mà chúng ta vừa tham khảo. Còn rất nhiều lợi ích khác từ việc sử dụng Sass thay cho việc viết CSS theo cách thông thường mà có thể đến khi nào các bạn sử dụng thì mới có thể thấy hết được. Vậy bạn đã sẵn sàng để chuyển sang sử dụng Sass thay cho cách viết CSS thông thường?

Tổng kết

Đương nhiên, các bạn mới bắt đầu hoặc những người đã lâu không còn làm công việc thiết kế web có thể sẽ không biết về Sass hoặc vẫn còn hơi mơ hồ về nó. Một lời khuyên dành cho các bạn lúc này là hãy nắm thật vững về CSS. Lúc này các bạn sẽ thấy rằng việc áp dụng Sass cũng giống như là ta đang viết lại CSS nhưng theo một hướng… logic hơn mà thôi.

Còn nếu bạn đang là một web designer, tôi khuyến khích bạn nên dành một chút thời gian nghía qua trang chủ của Sass (tại đây) và tìm hiểu thêm một chút về nó. Tin tôi đi, đây sẽ là thứ tuyệt vời nhất giúp bạn tạo và quản lý mã nguồn CSS của mình. Một bật mí nhỏ cho các bạn đang sử dụng Bootstrap Framework đó là framework này cũng đang sử Sass để quản lý CSS và các component của mình. Vì thế, chỉ cần nắm được Sass, các bạn có thể tự ý mổ xẻ và tùy chỉnh nó theo ý thích của mình. Quả là lợi hại phải không?