Giới thiệu về SASS

Nguyễn Trọng Quân

2 Th12 2022 • 4 min read

Danh Mục Bài Viết

CSS Preprocessor
Định nghĩa về SASS
SCSS là gì ?
1 số tính chất của SCSS
* Quy tắc xếp chồng (Nested Rule)
* Biến (Variable)
* Quy tắc Mixin
* Extends – Kế thừa
* Import
* Compile qua Laravel Mix

CSS Preprocessor

CSS Preprocessors là ngôn ngữ tiền xử lý CSS. Nó có công dụng sẽ giúp bạn viết một cú pháp CSS gần nhau với một ngôn ngữ lập trình rồi compile nó ra CSS thuần.

Có rất nhiều CSS Preprocessor như SASS, LESS, Stylus.... Tuy nhiên trong bài viết này, mình sẽ giới thiệu về SASS.

Định nghĩa về SASS

SASS (Syntactically Awesome StyleSheets) là một CSS Preprocessor giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. Với SASS, bạn có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn, các class dùng chung hay có thể tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng.

SCSS là gì ?

SASS đượ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, việc viết CSS như vậy không 'gần' CSS thuần nên việc hiểu và đọc code SASS rất khó hiểu, ví dụ như:

    .title 
       color= #fff;
       font-size= 50px;

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.
Hiểu 1 cách đơn giản, SCSS là một bản nâng cấp của SASS giúp chúng ta viết CSS một cách dễ dàng và dễ hiểu hơn.

Quy tắc xếp chồng (Nested Rule)

Ví dụ có 1 đoạn code :

<div class="container">
    <div class="row">
        <div class="navbar col-12">
            <a class="brand">Test Nested Rule</a>
            <ul class="menu">
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
            </ul>
        </div>
    </div>
</div>

Ta có đoạn code CSS(Sử dụng SASS)

.navbar {
    ul.menu {
        list-style: none;

        li {
            padding: 5px;

            a {
                text-decoration: none;
            }
        }
    }
}

Khi được complie ra thì đoạn mã CSS

.navbar ul.menu {
    list-style: none;
}

.navbar ul.menu li {
    padding: 5px;
}

.navbar ul.menu li a {
    text-decoration: none;
}

Thực tế quy tắc xếp chồng được sử dụng rất nhiều khi vào 1 project có viết css bằng SASS

Biến (Variable)

Biến chứa các giá trị mà bạn có thể sử dụng nhiều lần, ví dụ mã màu, font hay kiểu chữ....
Để khai báo một biến trong SASS, chúng ta sẽ viết dấu $ cùng với tên biến (khá là quen thuộc với dev PHP :v )

$whiteColor = #fff;
 
.navbar {
    ul.menu {
        list-style: none;
 
        li {
            padding: 5px;
 
            a {
                text-decoration: none;
                color: $whitecolor
            }
        }
    }
}

Quy tắc Mixin

Mixin là một cơ chế khá phổ biến trong SASS. Công dụng của nó là mang nhiều thuộc tính mà bạn đã quy ước trong một mix nào đó rồi @include vào một thành phần bất kỳ mà không cần phải viết lại các thuộc tính đó (Ví dụ ở trên là color vs font-size)

@mixin colorVsFont {
    color: #fff;
    font-size: 50px;
}
 
.navbar {
    ul.menu {
        list-style: none;
 
        li {
            padding: 5px;
 
            a {
                text-decoration: none;
                @include colorVsFont;
            }
        }
    }
}

Hoặc nếu bạn không muốn color lúc nào cũng là #fff, thì bạn có thể truyền thuộc tính vào mix như 1 tham số bằng cách viết như sau (Trông có vẻ giống truyền biến vào method):

@mixin colorVsFont($color, $fontSize) {
    color: $color;
    font-size: $fontSize;
}

.navbar {
    ul.menu {
        list-style: none;
 
        li {
            padding: 5px;
 
            a {
                text-decoration: none;
                @include colorVsFont(#000, 50px);
            }
        }
    }
}

Extends – Kế thừa

Cách thực hiện sẽ là bạn định nghĩa ra 1 class, rồi những tag nào cần sử dụng thì @extend nó vào là được rồi.

.title-box {
    color: #dacb46;
    text-shadow: 1px 1px 1px #1a1a1a;
    display: inline-block;
    text-transform: uppercase;
}

.navbar {
    ul.menu {
        list-style: none;

        li {
            padding: 5px;

            a {
                text-decoration: none;
                @extend .title-box;
            }
        }
    }
}

Import

Đây là một cú pháp của SASS mà mình muốn giới thiệu với bạn vì nó rất hữu dụng và thường xuyên sử dụng trong các project. Nó khá giống cách bạn require hay include file này vào file khác trong PHP.
Giả sử bạn có 1 trang index, bao gồm header, body, footer. Thay vì bạn CSS cho các phần trên vào 1 style.css thì với SASS bạn làm như sau:

Tạo 1 file _header.scss để CSS riêng cho header.
Tạo 1 file _body.scss để CSS riêng cho body.
Tạo 1 file _footer.scss để CSS riêng cho footer.

-> Rồi ở file style.scss ta chỉ cần @import 3 file trên

Compile qua Laravel Mix:

Nếu bạn đang làm việc với project Laravel thì bạn chẳng cần đến phần mềm thứ 3 nữa vì Laravel đã tích hợp một công cụ gọi là Laravel Mix với rất nhiều tính năng, có thể compile các CSS Preprocessor sang CSS thuần là một trong những tính năng hay ho của nó.