Sử dụng SASS để viết CSS chuyên nghiệp và hiệu quả

CSS Preprocessor là gì?

CSS Preprocessor là một ngôn ngữ kịch bản mở rộng của CSS và được biên dịch thành cú pháp CSS giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. CSS Preprocessor có thể giúp bạn tiết kiệm thời gian viết CSS, dễ dàng bảo trì và phát triển CSS,...

SASS là gì?

SASS là một CSS Preprocessor cung cấp thêm các quy tắc như nested rule, variable, mixin, ... 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ó thể tự động nén tập tin CSS.

Cài đặt và sử dụng SASS

1. Cài đặt

• Cài đặt ruby:

SASS là một ứng dụng viết bằng Ruby nên trước tiên bạn cần cài đặt Ruby trên máy nhé.

• Cài đặt SASS

gem install sass

• Chuyển đổi tập tin .sass sang .css

sass app.scss app.css

• Tự động thực hiện chuyển đổi trong quá trình làm việc:

sass --watch app.scss:app.css

• Chuyển đổi tất cả một thư mục trong quá trình làm việc:

sass --watch app/sass:public/css

2. Sử dụng SASS

Một số quy tắc viết SASS:

• Quy tắc xếp chồng

Sass cho phép CSS được lồng trong nhau. Ví dụ:

#container {
    awidth: 69%;
    p, div {
        font-size: 69px;
        a {
            font-weight: bold;
        }
    }
}

Sau khi biên dịch sẽ được:

#container {
    awidth: 69%;
}
#container p, #container div {
    font-size: 69px;
}
#container p a, #container div a {
    font-weight: bold;
}

Tham khảo: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_rules

• Sử dụng biến trong SASS

Cách đơn giản nhất để sử dụng Sass là sử dụng biến. Biến bắt đầu bằng ký hiệu $$và được thiết lập như các thuộc tính CSS. Ví dụ:

$awidth: 69px;
#container {
    awidth: $awidth;
}

#main {
    max-awidth: $awidth;
}

Sau khi biên dịch sẽ được:

#container {
  awidth: 69px;
}

#main {
  max-awidth: 69px;
}

Tham khảo: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_

• **Quy tắc Mixin **

Mixins cho phép bạn khai báo 1 đoạn css có thể được tái sử dụng.

Khai báo Mixins:

@mixin required {
    font-size: 13px;
    font-weight: bold;
    color: red;
}

Sử dụng Mixin:

.required{
    @include required;
    padding: 6px;
    margin: 9px;
}

Sau khi biên dịch sẽ được:

.required {
    font-size: 13px;
    font-weight: bold;
    color: red;
    padding: 6px;
    margin: 9px;
}

Tham khảo: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins

• Quy tắc kế thừa

Tính năng kế thừa cho phép bạn chỉ định cho một thành phần nào đó thừa hưởng tất cả các thuộc tính của một vùng chọn nào đó bất kỳ mà bạn đã khai báo sẵn.

Ví dụ:

.error {
  color: red;
}
.error-bold {
  @extend .error;
  font-weight: bold
}

Sau khi biên dịch sẽ được:

.error, .error-bold {
    color: red;
}
.error-bold {
    font-weight: bold;
}

Tham khảo: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend

• ** Mệnh đề điều kiện trong SASS**

SASS hỗ trợ rất nhiều mệnh đề điều kiện khác nhau như IF, FOR, EACH, WHILE. Các bạn có thể tham khảo tại: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions

Hy vọng với bài viết này các bạn đã có một cái nhìn tổng quan về SASS cũng như những lợi ích mà SASS mang lại. Tham khảo thêm về SASS tại:

• http://sass-lang.com
• http://sass-lang.com/documentation