Làm việc với biến trong SASS

Sass/Scss Variable (biến) là một khái niệm giúp việc viết CSS trở nên linh hoạt hơn. Trong Scss chúng ta có thể khai báo và định nghĩa biến bằng cách sử dụng ký tự $ trước tên biến. (Cú pháp này khá giống PHP)

Khai báo biến

$variable-name: variable value

Để gán giá trị cho biến chúng ta không sử dụng dấu bằng (=) như thông thường mà sử dụng dấu hai chấm (:) giống như khai báo thuộc tính trong CSS

Một biến được khai báo có thể sử dụng mọi nơi trong chương trình của bạn

// define the variable
$purple: #6A67CE;

.purple-btn
{
	text-align: center;
	background-color: $purple;
}
.purple-text
{
	color: $purple;
}

Một điểm khá hay trong cách đặt tên và sử dụng biến trong Sass/Scss đó là khi bạn đặt tên biến có dấu gạch ngang nhưng khi dụng có thể sử dụng gạch dưới nó vẫn hiểu. Bạn có thể xem ví dụ dưới đây

$purple-color: #6A67CE; 
.purple-btn 
{ 
    text-align: center; 
    background-color: $purple-color; 
} 
.purple-text 
{ 
    color: $purple_color;
}

Bạn đặt tên biến là $purple-color nhưng khi sử dụng bạn có thể gọi $purple_color

Biến lưu trữ thông tin gì và tại sao phải sử dụng biến?

Về nguyên tắc biến trong Sass cũng giống như biến thông thường trong các ngôn ngữ khác. Nó sinh ra giúp tránh trùng lặp code và dễ thay đổi sau này. Để hiểu hơn các bạn nhìn vào ví dụ sau

Đặt vấn đề:

Giả sử trên một trang chúng ta qui định cứ là text hover thì sẽ có color giống nhau. Bây giờ chúng ta cùng so sánh hai cách viết sau nhé

Không sử dụng biến

.nav ul li a:hover {
    color: #FA8072;
}

.author h3:hover {
    font-size: 1.2rem;
    color: #FA8072;
}

.content .note strong:hover {
    font-style: italic;
    color: #FA8072;
    text-decoration: underline;
}

Cách viết sử dụng biến

$text-hover-color: #FA8072;

.nav ul li a:hover {
    color: $text-hover-color;
}

.author h3:hover {
    font-size: 1.2rem;
    color: $text-hover-color;
}

.content .note strong:hover {
    font-style: italic;
    color: $text-hover-color;
    text-decoration: underline;
}


Nhìn vào 2 cách viết trên, bạn thấy nếu bây giờ chúng muốn thay đổi color khi hover vào thì với cách không sử dụng biến các bạn phải thay đổi code ở rất nhiều chỗ còn với việc sử dụng biến các bạn chỉ cần sửa 1 chỗ và các chỗ khác sẽ thay đổi theo.

Phạm vi sử dụng của biến

Giống như những ngôn ngữ khác, biến trong Sass cũng có khái niệm về Scope (phạm vi sử dụng). Chúng ta cùng tìm hiểu qua ví dụ sau nhé.

$purple: #6A67CE;

.purple-btn { 
    text-align: center; 
    // re-defining the variable
    $purple: red;
    background-color: $purple; 
}

.purple-text { 
    color: $purple; 
}

Code Sass trên sau compiled

.purple-btn {
    text-align: center;
    background-color: red;
}

.purple-text {
    color: #6A67CE;
}

Như các bạn thấy, chúng ta có biến $purple được khai báo ở hai nơi. Tuy nhiên viến $purple được khai báo trong class .purple-btn chỉ sử dụng được trong class đó. Còn biến $purple được khai báo bên ngoài có thể sử dụng ở mọi nơi. Đây là lý do mà bạn thấy trong class .purple-btn mặc dù có dùng biến $purple ở thuộc tính background-color nhưng giá trị cuối cùng nó nhận vẫn là red

Global switch

Bạn cũng có thể sử dụng !global switch để định nghĩa biến từ bên trong một scope (tuy nhiên cách này không được khuyến khích sử dụng). Các bạn xem xét ví dụ sau để hiểu hơn về !global trong Sass

$purple: #6A67CE;

.purple-btn { 
    text-align: center; 
    // re-defining the variable
    $purple: red !global;
    background-color: $purple; 
}

.purple-text { 
    color: $purple; 
}

Code Sass trên sau khi được compiled sang CSS

.purple-btn {
    text-align: center;
    background-color: red;
}

.purple-text {
    color: red;
}

Nhìn vào kết quả này rõ ràng là biến được $purple được khai báo lại trong scope .purple-btn đã bị orveride thành red color

Tổng kết

Bài viết này giúp các bạn hiểu về ý nghĩa của việc sử dụng biến và các tính chất của biến trong Sass từ đó ứng dụng hiệu quả hơn vào trong bài toán thực tế của mình.

Thanks for reading!