SASS/SCSS là gì? Cách viết CSS bằng SASS/SCSS

Làm việc liên quan đến CSS vốn đã rất quen thuộc với các lập trình viên. Tuy nhiên, làm việc với CSS thuần trong một thời gian dài có thể sẽ gây nhàm chán. Nếu bạn đang tìm kiếm cách viết CSS chuyên nghiệp, nhanh và rõ ràng mạch lạc hơn thì đừng bỏ qua SASS/SCSS. Vậy SASS/SCSS là gì? Cách viết CSS bằng SASS/SCSS như thế nào? Cùng xem ngay nhé!

CSS Preprocessor là gì?

CSS Preprocessor là một chương trình cho phép khởi tạo CSS từ cú pháp của bộ tiền xử lý (preprocessor). Hầu hết các CSS Preprocessor sẽ thêm một số tính năng không có sẵn trong CSS thuần tuý, chẳng hạn như mixin, nesting selector, inheritance selecter,… Các tính năng này giúp cấu trúc của CSS dễ đọc và dễ bảo trì hơn.

Để sử dụng một CSS Preprocessor, người dùng phải cài đặt CSS compiler trên web server hoặc dùng CSS Preprocessor để biên dịch môi trường dev, sau đó upload file CSS đã được biên dịch lên web server.

Một số CSS Preprocessor phổ biến gồm có: SASS, SCSS, LESS, Stylus và PostCSS. Về cơ bản thì SASS và SCSS là giống nhau, chỉ khác nhau về cách viết. Trong bài viết này, chúng ta sẽ cùng tìm hiểu xem SASS và SCSS là gì.

SASS là gì?

SASS (Syntactically Awesome Style Sheets) là một tiện ích mở rộng của CSS. Các ngôn ngữ style sheet kiểm soát vị trí và cách thức văn bản hiển thị trên webpage, từ kích thước và màu sắc khung cho đến vị trí của menu.

CSS được sử dụng trên hầu hết các trang web, thiết kế để giúp các developer viết lệnh hiển thị văn bản trên màn hình. CSS không được xây dựng để làm việc với các biến số hay thực hiện nhiều tác vụ phức tạp. SASS/SCSS chính là giải pháp giải quyết những khuyết điểm của CSS, giúp các developer tiết kiệm thời gian và công sức cho những dự án của mình.

Ưu điểm của SASS

• Thứ nhất, code SASS được tổ chức tốt hơn so với CSS. Về mặt lý thuyết, CSS và cả SASS đều có khả năng giống nhau, nhưng SASS có khối lượng code nhỏ hơn. Do đó, code của SASS dễ đọc và hiểu hơn, đặc biệt là trong những dự án web với nhiều developer khác nhau.
• SASS có cú pháp tương đối giống với CSS nên việc học sẽ không có nhiều khó khăn.
• Có khả năng tái sử dụng. SASS cho phép tái sử dụng các biến và đoạn code nhiều lần, giúp các developer tiết kiệm được nhiều thời gian và giảm thiểu bug trong code. Bên cạnh đó, việc thay đổi style (kích thước frame, màu sắc, kiểu viền,…) cũng nhanh chóng và đơn giản hơn.
• SASS có độ ổn định cao. Được ra mắt lần đầu vào năm 2006, SASS được hỗ trợ bởi nhiều developer kinh nghiệm đến từ các công ty công nghệ lớn nên sẽ được cập nhật và duy trì liên tục.

Cách hoạt động của SASS là gì?

SASS là một ngôn ngữ preprocessor được phiên dịch sang CSS. Các ngôn ngữ này nhận dữ liệu đầu vào và chuyển thành một input khác để dùng cho những chương trình khác. Do đó, bản chất của việc chạy code SASS là chuyển đổi code sang CSS. Output này sau đó sẽ được sử dụng bởi trình duyệt web vì các trình duyệt chỉ có khả năng đọc code CSS.

SCSS là gì?

SCSS (Sassy Cascading Style Sheets) là một ngôn ngữ tiền xử lý được biên dịch thành CSS, với phần mở rộng file có dạng .scss. SCSS cho phép thêm các tính năng bổ sung vào CSS, bao gồm các biến, nesting,… Các tính năng bổ sung có thể giúp việc viết SCSS đơn giản và nhanh chóng hơn nhiều so với CSS tiêu chuẩn. SCSS có thể sử dụng code và hàm của CSS, tuân theo cú pháp của CSS và hỗ trợ mọi tính năng có trong SASS.

Ưu điểm của SCSS

• SCSS cho phép viết code gọn gàng, nhanh chóng hơn trong cấu trúc chương trình.
• SCSS cung cấp tính năng nesting, do đó developer có thể sử dụng cú pháp lồng nhau và nhiều hàm hữu ích, trong đó có cả các thao tác liên quan đến màu hay dùng hàm toán học,…
• Cung cấp các biến để tái sử dụng các giá trị trong CSS.
• Tương thích được với mọi phiên bản CSS.

Nhược điểm của SCSS

• Debug: Các preprocessor có một giai đoạn biên dịch, do đó code CSS trở nên vô nghĩa trong quá trình debug. Ngoài ra việc debug cũng trong SCSS cũng khó hơn rất nhiều.
• File CSS lớn: Dù source file có kích thước không đáng kể thì file CSS vẫn sẽ có kích thước lớn hơn nhiều.
• Ngoài ra, việc sử dụng SASS cũng có thể làm vô hiệu hoá một số inspector tích hợp sẵn trong trình duyệt.

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

Xếp chồng (Nested Rules)

Đây là một trong những tính năng được sử dụng thường xuyên nhất của SCSS. Ví dụ:

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

Giả sử ta chỉ cần CSS cho thẻ ul với class menu thì trong CSS ta viết như sau:

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

Nếu muốn CSS cho thẻ li trong ul thì:

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

Sau đó nếu muốn thêm tiếp CSS cho thẻ a trong li, thì ta cần phải lặp đi lặp lại tên parent tag (class hoặc id) của thẻ muốn CSS. Tuy nhiên việc này mất rất nhiều thời gian, do đó ta có thể dùng tính năng Nested Rules của SASS.

Ví dụ:

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

        li {
            padding: 3px;

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

Sau khi compile ra CSS thuần:

.navbar ul.menu {
    list-style: none;
}
.navbar ul.menu li {
    padding: 3px;
}
.navbar ul.menu li a {
    text-decoration: none;
}

>> Xem thêm: Code convention là gì? Các quy tắc chung khi viết code

Biến (variable)

Sử dụng biến với SCSS không quá phức tạp, ta chỉ cần đặt tên cho biến (bắt đầu bằng $). Biến chứa các giá trị ta có thể dùng nhiều lần, chẳng hạn như mã màu, font hay kiểu chữ.

$RedColor = #fff;

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

        li {
            padding: 3px;

            a {
                text-decoration: none;
                color: $Redcolor
            }
        }
    }
}

Mixin rule

Mixin cho phép tạo các hàm được dùng trong SCSS và người dùng có thể truyền thêm các tham số nếu cần. Mixin là một cơ chế khá phổ biến trong SASS, mang nhiều thuộc tính được 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 viết lại thuộc tính.

@mixin colorVsStyle {
    color: #f06;
    font-style: italic;
}

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

        li {
            padding: 5px;

            a {
                text-decoration: none;
                @include colorVsStyle;
            }
        }
    }
}

Nếu không muốn color luôn nhận giá trị #f06 thì có thể truyền thuộc tính vào mix như một tham số:

@mixin colorVsStyle($color, $fontStyle) {
    color: $color;
    font-style: $fontStyle;
}

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

        li {
            padding: 5px;

            a {
                text-decoration: none;
                @include colorVsStyle(#000, italic);
            }
        }
    }
}

Kế thừa (Extend)

Để sử dụng ta chỉ cần định nghĩa một class, rồi thêm @extend với những tag cần:

.title-box {
    color: ##2EFEC8;
    text-shadow: 0px 0px 10px #6E6E6E;
    display: inline-block;
    text-transform: uppercase;
}

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

        li {
            padding: 4px;

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

Import

Cú pháp import rất hữu dụng và thường xuyên được sử dụng trong các dự án, tương tự với việc require hay thêm include file vào những file khác trong PHP.

Giả sử ta có một trang index gồm header, body và footer. Thay vì sử dụng CSS để cho tất cả vào một file style.css thì ta chỉ cần thực hiện các bước sau với SASS:

1. Tạo 1 file _header.scss để CSS riêng cho header.
2. _body.scss để CSS riêng cho body.
3. _footer.scss để CSS riêng cho footer.
4. @import 3 file trên vào style.css.

_header.scss

#header {
    // code sass 
}

_body.scss

#body {
    // code sass 
}

_footer.scss

#footer {
    // code sass
}

style.scss

@import 'header';
@import 'body';
@import 'footer';

// code sass

Vòng lặp

Mệnh đề điều kiện

>> Xem thêm:

• Position trong CSS là gì? Giới thiệu các thuộc tính position trong CSS
• Vector trong C++ là gì? Tổng hợp các hàm vector trong C++ và cách sử dụng

Lời kết

Qua bài viết này, có thể thấy rằng SCSS/SASS cho phép các developer làm việc với một ngôn ngữ lập trình thực sự. Bên cạnh đó, việc biên dịch sang CSS cũng cho phép sử dụng thêm một số các tính năng hữu ích khác. Nếu còn điều gì chưa rõ hoặc có ý kiến đóng góp, mời bạn để lại bình luận bên dưới. Vietnix xin chân thành cảm ơn!