Tìm hiểu về SASS

SASS là một ngôn ngữ giúp mở rộng CSS với những tính năng vượt trội mà bản thân CSS thuần không thể cung cấp như nesting variasbles mixins extend/inheritance function ...

Cài đặt SASS và biên dịch

Cài đặt:

Để cài đặt SASS trước hết bạn phải cài đặt Ruby trước sau đó chỉ chạy lệnh sau trên command line

gem install sass

Biên dịch:

Khi bạn muốn biên dịch tập tin nào thì bạn chỉ cần chạy câu lệnh

sass input.sass output.csss

Nếu bạn không muốn cứ thay đổi file nào đó cũng lại phải chạy lại câu lệnh trên thì bạn có thể dùng câu lệnh sau để SASS có thể tự biên dịch sau mỗi lần bạn lưu lại những thay đổi

sass --watch input.sass:output.css

Nếu bạn muốn chuyển đổi tất cả các file SASS thì bạn có thể dùng lệnh

sass --watch sass:css

Tổng quan về SASS

SASS hỗ trợ 2 định dạng scss và sass. Cú pháp của SCSS không khác CSS thuần còn SASS thì quy định rất nghiêm về cách thụt, lùi dòng, khoảng trăng và không hề sử dụng {} và ; Bạn có thể nhìn ví dụ sau để có thể hiểu hơn về cú pháp của SASS

ul
height : 40px
margin-top : 0
margin-left : 20px
width : 220px
​
li
    padding : 22px 0 8px
    width : auto
​

Khi biên dịch bạn sẽ nhận được

ul {
height: 40px;
margin-top: 0;
margin-left: 20px;
width: 220px;
}
ul li {
padding: 22px 0 8px;
width: auto;
}

Như đã nói ở trên cú pháp của SASS rất quan trọng khoảng trắng thụt, lùi dòng. Cũng từ ví dụ trên nếu bạn viết

ul
height : 40px
margin-top : 0
margin-left : 20px
width : 220px
​
li
padding : 22px 0 8px
width : auto

Khi biên dịch ra CSS

ul {
height: 40px;
margin-top: 0;
margin-left: 20px;
width: 220px;
}
​
li {
padding: 22px 0 8px;
width: auto;
}

Variables

Trong SASS thì bạn có thể dùng biến để khai báo 1 giá trị nào đó mà chúng ta đã xác định trước và sẽ được dùng nhiều lần như: mã màu, font-size hay bất cứ giá trị nào mà bạn sử dụng nhiều. Để khai báo biến bạn thêm $ vào trước tên biến. Và để sử dụng biến đó thì cũng rất đơn giản. Ví dụ

$simple_color: #333
h1
color: $simple_color
Khi biên dịch bạn sẽ được

CSS

h1 {
color: #333
}

Chức năng thật sự rất tuyệt trong việc clean code cho bạn. và khi bạn muốn đổi thì ta cũng chỉ cần tìm đến đúng biến này là có thể thay đổi tất cả những nơi có gọi đến biến này.