SASS/SCSS là gì? Tìm hiểu cách viết CSS bằng SASS/SCSS

Làm việc với CSS là việc thường xuyên của mọi thể loại dev :v. Có khi nào bạn thấy chán cách viết CSS 'chay' mà bạn vẫn đang viết thường ngày? Có cách nào để viết CSS một cách chuyên nghiệp hơn không ? Có đấy, cùng tìm hiểu trong bài viết này nhé.

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 khuôn khổ bài viết này, mình sẽ giới thiệu bạn về SASS.

Nếu bạn đã biết đến Typescript - javascript Preprocessor thì công dụng của SASS cũng như Typescript vậy đó.

Cùng tìm hiểu xem nó như thế nào nhé.

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.

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, kiểu như này:

.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.

Ok, let's gooooooooooo !!!

Ví dụ mình có một đoạn HTML như sau

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

Giả sử bạn chỉ muốn CSS cho thẻ ul với class menu, với CSS thuần bạn viết

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

Nếu bạn tiếp tục muốn CSS cho thẻ li trong thẻ ul (có class là menu) thì

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

Rồi bạn lại tiếp tục muốn CSS cho thẻ a trong thẻ li... thì cứ phải viết lặp đi lặp lại tên tag (hoặc class, hoặc id) cha của thẻ muốn css thì rất cực phải không nào ?

Nested Rule của SASS sinh ra để giúp bạn làm điều trên một cách đơn giản hơn.

Cú pháp viết như sau:

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

        li {
            padding: 5px;

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

Và sau khi được đoạn SASS trên được compile ra CSS thuần sẽ như sau:

.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