Tidadigi Logo

CSS Preprocessor SASS

Sass (Syntactically Awesome Style Sheets) là một CSS preprocessor giúp tăng cường CSS tiêu chuẩn. Nó giới thiệu các tính năng như biến, lồng nhau, imports, mixins và kế thừa. Sass vẫn duy trì tính tương thích với tất cả các phiên bản CSS.

Các tính năng chính của Sass:

  • Variables: Lưu trữ các giá trị dùng chung như màu sắc, fonts, hoặc bất kỳ giá trị CSS nào để tạo kiểu nhất quán.
  • Nesting: Phản ánh cấu trúc HTML trong stylesheets của bạn bằng cách lồng các quy tắc CSS vào nhau.
  • Imports: Chia CSS của bạn thành các tệp nhỏ dễ quản lý rồi import chúng khi cần.
  • Mixins: Tạo các đoạn code có thể tái sử dụng trong các selector khác, giúp tái sử dụng code hiệu quả.
  • Inheritance: Chia sẻ một tập hợp các thuộc tính CSS từ một selector sang selector khác bằng cách sử dụng chỉ thị @extend.

Cài đặt:

  • Để cài đặt Sass, hãy làm theo hướng dẫn trên trang cài đặt Sass chính thức.

Các biến thể cú pháp của Sass:

  • SCSS (Sassy CSS): Nó sử dụng phần mở rộng .scss và hoàn toàn tương thích với cú pháp CSS.
  • Indented Syntax (Sass): Một cú pháp cũ sử dụng thụt lề thay vì dấu ngoặc nhọn và dấu chấm phẩy, các tệp có phần mở rộng .sass.

Các bước quy trình làm việc:

  • Viết code SCSS: Tạo một tệp có tên styling.scss với code Sass của bạn.
  • Biên dịch SCSS sang CSS: Sử dụng lệnh sass styling.scss style.css để biên dịch tệp SCSS thành tệp CSS chuẩn. Tệp CSS chuẩn có tên là style.css.
  • Include trong HTML: Liên kết tệp style.css đã biên dịch trong tài liệu HTML của bạn bên trong phần <head>.

Ví dụ: Tên tệp index.html

HTML 
<html>
<head>
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <div id="d1">Welcome to GeeksforGeeks.
        <ul>
            <li>Algo</li>
            <li>DS</li>
            <li>Languages</li>
            <li>Interviews</li>
            <li>CS subjects</li>
        </ul>
    </div>
</body>
</html>

Variables: Các biến có thể được sử dụng để lưu trữ các giá trị CSS có thể dùng lại. Để khai báo một biến trong SASS, ký tự '$' được sử dụng. Ví dụ: $v_name.

$fs: 30px;
$bgcolor: #00ff40;
$pd: 100px 350px;
#dl {
 font-size: $fs;
 color: $bgcolor;
 padding: $pd;
}

Hình này cho thấy code tương tự:

css-preprocessor-sass

Sau khi biên dịch code CSS, hãy lưu nó trong tệp bằng style.css.

#dl {
 font-size: 30px;
 color: #00ff40;
 padding: 100px 350px;
}
css-preprocessor-sass

Nesting: SASS cho phép các quy tắc CSS được lồng vào nhau theo cùng một cấu trúc hình ảnh của HTML. Ví dụ: thuộc tính CSS có thể được sử dụng cho thẻ <li> được lồng bên trong thẻ div.

$fs: 30px;
$bgcolor: #00ff40;
#col2: #ff0066e1;
$pd: 100px 350px;
#dl {
 font-size: $fs;
 color: $bgcolor;
 padding: $pd;
 li {
   color: $col2;
 }
}
css-preprocessor-sass

Sau khi biên dịch code CSS, hãy lưu nó trong tệp bằng style.css.

#dl {
 font-size: 30px;
 color: #00ff40;
 padding: 100px 350px;
}
#dl li {
 color: #ff0066e1;
}
css-preprocessor-sass

Output:

css-preprocessor-sass

Mixins: Mixins giúp tạo một tập hợp các thuộc tính CSS có thể tái sử dụng nhiều lần. Nó giúp lưu code và sử dụng lại nhiều lần. Mixins có thể được include trong các quy tắc CSS khác bằng cách sử dụng chỉ thị @include.

Ví dụ: Ví dụ này mô tả cách sử dụng @mixin & @include.

$fs: 30px;
$bgcolor: #00ff40;
#col2: #ff0066e1;
$pd: 100px 350px;
@mixin font_style() {
 font-family: sans-serif;
 font-size: $fs;
 color: blue;
}
#dl {
 @include font_style();
 padding: $pd;
}
css-preprocessor-sass

Sau khi biên dịch code CSS sẽ trở thành:

#dl {
 font-family: sans-serif;
 font-size: 30px;
 color: blue;
 padding: 100px 350px;
}
css-preprocessor-sass

The output of the web page:

css-preprocessor-sass

Ví dụ: Mixins cũng có thể nhận các biến làm đối số. Các giá trị được truyền khi include chúng trong các quy tắc CSS.

$fs: 30px;
#col2: #ff0066e1;
$pd: 100px 350px;
@mixin font_style() {
 font-family: sans-serif;
 font-size: $fs;
 color: blue;
}
@mixin list_style($size, $color) {
 font-size: $size;
 color: $color;
}
#dl {
 @include font_style();
 padding: $pd;
 li {
   @include list_style(20px, red);
 }
}
css-preprocessor-sass

Code CSS đã biên dịch:

#dl {
 font-family: sans-serif;
 font-size: 30px;
 color: blue;
 padding: 100px 350px;
}
#dl li {
 font-size: 20px;
 color: red;
}
css-preprocessor-sass

Final Output:

css-preprocessor-sass

Các phương pháp hay nhất

  • Modularize Your Code: Sắp xếp các kiểu của bạn thành các partials nhỏ hơn, dễ quản lý hơn. Sau đó import chúng vào một stylesheet chính để dễ bảo trì hơn.
  • Use Variables Effectively: Xác định các biến cho màu sắc, fonts và các giá trị dùng chung khác. Điều này giúp duy trì tính nhất quán và đơn giản hóa việc cập nhật.
  • Limit Nesting Depth: Tránh lồng quá sâu để ngăn chặn các selector quá cụ thể. Duy trì khả năng đọc, độ sâu lồng 3 cấp được khuyến nghị.
  • Utilize Mixins and Functions: Tạo các mixins và functions có thể tái sử dụng cho các mẫu chung. Nó giúp giảm trùng lặp code và tăng cường khả năng bảo trì.
  • Consistent Formatting: Duy trì kiểu code nhất quán, bao gồm thụt lề và quy ước đặt tên. Nó sẽ cải thiện khả năng đọc code và hợp tác.

Last Updated : 21/07/2025