Làm quen với SCSS/SASS trong 15 phút.

1. Khái quát về SCSS/SASS.

SCSS/SASS là gì?

SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor). Nó giúp bạn viết CSS theo cách của một ngôn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển và bảo trì code hơn.

SASS và SCSS về bản chất vấn đề là giống nhau, chỉ khác nhau ở cách viết.

*.SASS

Quy tắc xếp chồng được thể hiện bằng cách sử dụng indent.
Không cần sử dụng dấu ; khi kết thúc 1 property.
Dùng ký tự = để khai báo Mixins.
Dùng ký tự + để sử dụng Mixins

*.SCSS

Quy tắc xếp chồng được thể hiện bằng cách sử dụng dấu { và }.
Sử dụng dấu ; để kết thúc 1 property.
Khai báo Mixins bằng thuật ngữ directive @mixin.
Sử dụng Mixins bằng thuật ngữ directive @include.

2. Các tính năng cơ bản của SCSS.

SCSS syntax: Cú pháp của SCSS dựa trên cú pháp của CSS, bắt đầu sử dụng { } và ; như CSS, không còn quá quan trọng việc thụt lề hay các khoảng trắng.

Ta có 1 đoạn code css như sau:

.hinh-vuong {
    width: 100px;
    height: 100px;
    background-color: #bf0000;
    box-shadow:  1px 1px 1px 1px #bf0000;
}

.hinh-vuong .mauchu {
    size: 14px;
    text-align: center;
}

.hinh-vuong .mauchu .dong-1 {
    color: brown;
    text-align: left;
}

Quy tắc xếp chồng (Nested Rules): Thay vì với mỗi lần style lại phải thêm .hinh-vuong, bạn chỉ việc đặt .mau-chu và .dong-1 vào bên trong .hinh-vuong là xong.

 .hinh-vuong {
    width: 100px;
    height: 100px;
    background-color: #b3b3b3;
    box-shadow: 1px 1px 1px 1px #bf0000;
    .mau-chu {
        size: 14px;
        text-align: center;
        .dong-1 {
            color: #bf0000;
            text-align: left;
        }
    }
}

Sử dụng biến (Varibles): Khi code thì việc có nhiều mã màu để sử dụng rất bình thường (VD: #xxxxxx), và tất nhiên là rất khó để có thể nhớ được và sử dùng lại khi cần. Với SCSS, bạn có thể tạo biến đê lưu mã màu đó, và điều duy nhất bạn cần làm là nhớ tên biến đó thôi . :D

$mau-nau-do: #bf0000;
$kich-thuoc: 100px;
.hinh-vuong {
    width: $kich-thuoc;
    height: $kich-thuoc;
    background-color: blue;
    box-shadow: 1px 1px 1px 1px $mau-nau-do;
    .mau-chu {
        size: 14px;
        text-align: center;
        .dong-1 {
            color: $mau-nau-do;
            text-align: left;
        }
    }
}

Quy tắc Mixin: Bạn sử dụng các kiểu style giống nhau nhưng khác value? Thay vì phải viết lại style nhiều lần (thiệt mệt mỏi), bạn có thể sử dụng @mixin để khai báo class và sử dụng @include để tái sử dụng với value theo ý muốn.

$mau-nau-do: #bf0000;
$kich-thuoc: 100px;

@mixin dong-1($color, $text) {
    color: $color;
    text-align: $text;
}

.hinh-vuong {
    width: $kich-thuoc;
    height: $kich-thuoc;
    background-color: blue;
    box-shadow: 1px 1px 1px 1px $mau-nau-do;
    .mau-chu {
        size: 14px;
        text-align: center;
        .dong-1 {
            @include dong-1($mau-nau-do, left);
        }
    }
}

Quy tắc Kế thừa: Na ná OOP, và đơn giản bạn chỉ cần khai báo trước một class và kế thừa style bằng @extend thôi.

.do-bong-chu {
    text-shadow: 1px 1px 1px;
}

.hinh-vuong {
    width: $kich-thuoc;
    height: $kich-thuoc;
    background-color: blue;
    box-shadow: 1px 1px 1px 1px $mau-nau-do;
    .mau-chu {
        size: 14px;
        text-align: center;
        .dong-1 {
            @include dong-1($mau-nau-do, left);
            @extend .do-bong-chu;
        }
    }
}

3. Complie từ SCSS sang CSS như thế nào?

Ở đây mình sử dụng tool koala (vẫn còn khá nhiều cách khác bạn có thể tự tìm hiểu thêm)

Bước 1: Để tạo một dự án hãy thêm một thư mục chứa code sass.

Bước 2: Bấm vào tên dự án (thư mục) để biết thông tin tương ứng bên phải.

Bước 3: Bấm vào file nguồn sass để xuất hiện thanh bên phải để thiết lập thêm (4).

Bước 4: Mặc định file nguồn sass ở chế độ Auto Compile, nghĩa là mỗi khi file sass thay đổi nó sẽ tự động biên dịch ra file css, file xuất ra css có thể chọn ở dạng nén compressed, nested …

Bước 5: Nếu muốn thay đổi đường dẫn chứa file kết quả biên dịch css, nhấn phải chuột chọn Set Output Path. Bằng cách thiết lập như vậy, nếu Koala còn đang mở, thì mỗi khi file nguồn .sass thay đổi nó sẽ tự động biên dịch thành .css

4. Nguồn tham khảo

https://viblo.asia/p/sass-va-scss-ban-chon-gi-part-1-gAm5yR1XKdb