Giới thiệu tổng quan về Sass/Scss

Giới thiệu chung

Như đã giới thiệu trong phần mở đầu của Giáo trình Sass toàn tập. SASS viết tắt (Syntactically awesome style sheets) là một khái niệm mở rộng trong CSS, cung cấp cho chúng ta một phương pháp viết code CSS mới, giúp code trở nên ngắn gọn, dễ ràng và tối ưu hơn. Nói một cách đơn giản, SASS chỉ phần xử lý trước khi chúng ta có được đầu ra cuối cùng là CSS

Điều kiện bắt buộc để học Sass

Về bản chất SASS vẫn là CSS nên để học được SASS bạn bắt buộc phải có kiến thức cơ bản về CSS trước. Nếu bạn là người mới và chưa biết gì về CSS thì có thể học qua Giáo trình CSS này

SASS là gì?

Sass là một ngôn ngữ Language Script dùng để biên dịch file SASS sang CSS, có thể coi SASS là một phiên bản mới của CSS, nó đem lại những tính năng mà một Developer cần và bổ sung những thiếu điểm mà CSS chưa có. Mặc dù ở phiên bản CSS3 có hỗ trợ nhiều cú pháp mới, nhưng nó vẫn thiếu khá nhiều thứ so với kỳ vọng thực tế.

Dưới đây là một ví dụ để các bạn thấy sự khác biệt giữa việc dùng Sass và CSS

Dùng CSS thông thường

.suntech-btn { 
    text-align: center; 
    background-color: #131b31; 
}

.suntech-btn:hover { 
    background-color: #131a00; 
}

Dùng Sass

$suntechBtnColor: #131b31;
$darkSuntechBtnColor: darken($suntechBtnColor, 15%);

.suntech-btn 
{
    text-align: center;
    background-color: $suntechBtnColor;
} 
.suntech-btn:hover
{
    background-color: $darkSuntechBtnColor;
}

Những lợi ích khi sử dụng Sass

Những ưu điểm mà Sass đem lại là vô cùng lớn, nếu ai đã sử dụng Sass rồi chắc chắn sẽ không bao giờ muốn quay trở lại với cách viết CSS thông thường nữa. Dưới đây là một số lợi ích lớn mà Sass đem lại theo:

Cú pháp giống như viết CSS nên dễ ràng học cho việc học.
Tiết kiệm thời gian viết CSS.
Dễ dàng bảo trì và phát triển sau này.
Có tính linh hoạt và tái sử dụng lại code (kế thừa).
Các tập tin, đoạn mã được tổ chức, sắp xếp một cách rõ ràng.

Phân biệt SASS với SCSS

Sass là một phần mở rộng của CSS3, được thêm các quy tắc như biến, mixin, nested, kế thừa,... Biên dịch sang CSS chuẩn và có định dạng tốt.

Sass có hai cú pháp. Cú pháp chính mới (kể từ Sass 3) được gọi là "SCSS" (Sassy CSS) và là một tập hợp siêu cú pháp của CSS3. Điều này có nghĩa là mọi cú pháp CSS3 hợp lệ cũng là SCSS hợp lệ.

Cú pháp thứ hai, cũ hơn được gọi là "indented syntax". Lấy cảm hứng từ sự ngắn gọn của Haml, nó dành cho những người thích sự ngắn gọn. Thay vì dấu ngoặc và dấu chấm phẩy, nó sử dụng thụt đầu dòng để chỉ định khối. Mặc dù không còn là cú pháp chính, nhưng cú pháp này vẫn tiếp tục được hỗ trợ. Các file theo cú pháp này có phần mở rộng là .sass

Tổng kết

Để chắc chắn bạn đã hiểu được nội dung truyền tải trong bài này, các bạn hãy tự đặt câu hỏi cho chính mình để xem bạn đã nắm được những kiến thức sau chưa nhé: