Xin chào các bạn, chào mừng với các bạn trở lại với series SASS/SCSS của mình. Ở các bài trước, mình đã giới thiệu cho các bạn các style rules của SCSS. Hôm nay, mình xin được giới thiệu về “biến” (Variables) của SCSS. Đây là một trong những công cụ hữu ích nhất mà SASS/SCSS mang lại. Sử dụng biến sẽ giúp ta giảm đi sự phức tạp khi viết code. Ví dụ nếu ta muốn style cho 1 nhóm các elemet có cùng 1 màu, nếu theo cách truyền thống ta phải gán cho từng element với màu ta muốn. Nếu có sự thay đổi, ta phải thay đổi cho từng element, nhưng nếu ta dùng biến, ta chỉ đơn giản thay đổi giá trị mà ta đã khai báo.

“Biến” trong SCSS cũng giống như “biến” trong các ngôn ngữ lập trình khác. Ta gán một giá trị cho một tên bắt đầu bằng $ và sau đó, ta có thể tham chiếu đến biến đó thay vì giá trị mà ta đã gán cho biến.

Khai báo biến

Không giống như khai báo thuộc tính style, phải tuân theo quy luật style rule hoặc at rule, ta có thể khai báo biến ở bất cứ đâu mà ta muốn.

SCSS
CSS
Lưu ý:

CSS có “biến” của chính nó và biến trong CSS khác biệt hoàn toàn với biến trong SCSS Như:

  • Biến của SCSS sẽ được biên dịch bởi SCSS, còn biến của CSS sẽ được thêm vào trong cấu trúc CSS.
  • Biến của CSS có thể có các giá trị khác nhau cho từng element khác nhau, nhưng biến của SCSS chỉ có duy nhất một giá trị trong cùng một thời điểm.
  • Biến của SCSS là đại diện (imperative), vì vậy khi ta sử dụng và thay đổi giá trị của biến, các vị trí ta đã sử dụng trước đó sẽ được giữ nguyên. Còn biến CSS là khai báo (declarative), vì vậy nếu ta thay đổi giá trị của nó sẽ ảnh hưởng đến việc sử dụng trước đó và sau này.
SCSS
CSS

Default Values

Thông thường, khi ta gán giá trị cho một biến và biến đó đã có giá trị thì giá trị cũ sẽ bị ghi đè thành giá trị mới. Khi ta viết một thư viện SCSS và ta muốn cho phép người sử dụng cấu hình các biến trong thư viện trước khi sử dụng chúng biên dịch ra CSS.

Để thực hiện được điều này, SCSS cung cấp cho ta cờ !default. Với cờ !default, SCSS sẽ chỉ gán giá trị này cho biến nếu biến này không được định nghĩa (defined) hoặc giá trị của biến này là rỗng. Nếu không, giá trị được định nghĩa sẽ được sử dụng.  

SCSS
CSS

Built-in Variables

Biến được khai báo bởi built-in module (mình sẽ giới thiệu trong các bài sau) sẽ không thể sửa đổi.

Scope

Biến được khai báo ở cấp cao nhất của stylesheet là biến toàn cục (global variables). Điều này có nghĩa là nó có thể được sử dụng ở bất cứ đâu đâu trong module của bạn sau khi nó được khai báo. Các biến được khai báo trong blocks (dấu ngoặc nghọn trong SCSS hoặc thụt lề trong SASS) thường là cục bộ và chỉ có thể được sử dụng trong blocks mà chúng được khai báo.

SCSS
CSS

Shadowing

Biến cục bộ (local variables) có thể được khai báo cùng tên với biến toàn cục (global variables). Nếu điều này xảy ra, sẽ có hai biến khác nhau với cùng tên, một là cục bộ, một là toàn cục. Nó giúp cho người viết khai báo một biến cục bộ mà không tình cờ làm thay đổi giá trị của một biến toàn cục khác có cùng tên mà họ không biết.

SCSS
CSS

Nếu ta cần thay đổi giá trị của biến toàn cục từ phạm vi cục bộ (như trong mixin), ta có thể sử dụng cờ !global. Biến được khai báo với cờ !global sẽ luôn luôn được chỉ định là toàn cục.

SCSS
CSS
Lưu ý: 

Cờ !global chỉ được sử dụng để gán giá trị cho biến đã được khai báo ở cấp cao nhất của file. Nó không được sử dụng để khai báo một biến mới.

Flow Control Scope

Các biến được khai báo trong Flow Control Scope có luật phạm vi đặc biệt của chúng: chúng sẽ không bị ghi đè tại cùng một mức. Điều đó giúp cho việc gán giá trị cho biến hoặc sử dụng biến vòng lặp trở nên dễ dàng hơn.

SCSS
CSS

Advanced Variable Functions

Thư viện core của SCSS có hổ trợ một vài hàm hổ trợ để làm việc với biến như  meta.variable-exists() sẽ trả về một biến nếu biến đó tồn tại ở phạm vi hiện tại và meta.global-variable-exists() cũng trả về 1 biến nhưng ở phạm vi toàn cục.

Lưu ý:

Người dùng đôi khi sẽ muốn sử dụng phéo nội suy (interpolation) để xác định tên biến dựa trên một biến khác. SCSS không hỗ trợ việc này vì nó khiến cho việc xác định biến được khai báo ở đâu trở nên khó khăn hơn rất nhiều. Tuy nhiên ta có thể khai báo một bản đồ (map) từ tên biến đến giá trị của biến mà sau đó ta có thể truy cập.

SCSS
CSS

Tổng kết

Qua bài viết này, mình đã giới thiệu sơ lượt một cách đầy đủ về biến và cách sử dụng chúng trong SASS/SCSS. Các bạn hãy xem thật kỹ và luyện tập để có thể sử dụng thành thạo chúng nhé vì chúng rất có ích và vô cùng mạnh mẽ giúp ta maintenance code CSS trong dự án của chúng ta nếu được sử dụng một cách hợp lý và có hệ thống đấy.