Bài 06: Khai báo và sử dụng biến trong SASS

Như mình đã nói SASS có những chức năng rất giống với một ngôn ngữ lập trình nên việc hỗ trợ sử dụng biết là quá bình thường. Và trong bài này chúng ta cùng tìm hiểu cách định nghĩa, khai báo và sử dụng một biến trong SASS.

1. Khai báo và sử dụng biến trong SASS

Để khai báo một biến trong SASS thì ta sử dụng cú pháp sau:

$variable-name : value;

Ví dụ: Khai báo biến trong SASS

$color-gray : #333;
$color-white : #fff;
$color-black : #000;

Những biến này lúc biên dịch sẽ đưa vào đúng vị trí sử dụng trong CSS.

Ví dụ: Sử dụng biến trong SASS

SCSS:

$color-yellow : yellow;
$color-red : red;
$color-blue : blue;

.error{
    color: $color-red;
}

.success{
    color: $color-blue;
}

.warning{
    color: $color-yellow;
}

CSS sau khi biên dịch:

.error {
  color: red; 
}

.success {
  color: blue; 
}

.warning {
  color: yellow; 
}

2. Tại sao sử dụng biết trong SASS

Giả sử trong một layout website có nhiều vị trí và mỗi vị trí có một backgroud khác nhau, lúc này nếu viết CSS như trước đây thì mỗi lần đổi background rất khó khăn Vì vậy nếu sử dụng SASS thì chỉ cần tìm đến biến lưu trữ background đó và thay đổi là được.

Cũng có trường hợp nhiều vị trí dùng chung background nên nếu code CSS thông thường thì mỗi lần đổi sẽ phải replace nhiều vị trí. Nhưng nếu sử dụng biến để lưu trữ background thì ta chỉ cần replace đúng một vị trí mà thôi.

Ví dụ: Nhiều selector dùng chung biến

SCSS:

$background-widget : #acacac;

.header{
    color: #FFF;
    background-color: $background-widget;
}

.footer{
    color: #333;
    background-color: $background-widget;
}

CSS sau khi biên dịch:

.header {
  color: #FFF;
  background-color: #acacac; 
}

.footer {
  color: #333;
  background-color: #acacac; 
}

Ví dụ: Sử dụng biến trong Place Holder và kế thừa

SCSS:

$background-widget : #acacac;

%box{
    border: solid 1px;
    background-color: $background-widget;
}

.header{
    @extend %box;
    color: #FFF;
}

.footer{
    @extend %box;
    color: #333;
}

CSS sau khi biên dịch:

.header, .footer {
  border: solid 1px;
  background-color: #acacac; 
}

.header {
  color: #FFF; 
}

.footer {
  color: #333; 
}

3. Lời kết

Như vậy việc sử dụng biến trong SASS rất có lợi cho việc quản lý bảo trì code CSS, và qua bài này bạn đã dần thấy được sức mạnh của SASS rồi đấy nhé. Bài tiếp theo chúng ta sẽ tìm hiểu Nested trong SASS.

Bài trước Bài tiếp