Hiểu về phạm vi của biến trong Sass

() translation by (you can also view the original English article)

Trong bài viết này, chúng ta sẽ tìm hiểu sâu hơn vào các biến và phạm vi của biến trong Sass. Phạm vi của một biến mô tả ngữ cảnh trong đó nó được định nghĩa và từ đó nơi mà nó có thể được truy xuất.

Để bắt đầu, tôi sẽ bao quát các phạm vi nào Sass hỗ trợ. Sau đó, tôi sẽ giải thích hai nhãn hữu ích mà chúng ta có thể sử dụng để tuỳ biến các giá trị của một biến. Cuối cùng, tôi sẽ trình bày ngắn gọn các hàm sẵn có cho việc kiểm tra một biến có tồn tại hay không.

Phạm vị của biến trong Sass

Sass hỗ trợ hai kiểu biến: các biến cục bộ và các biến toàn tục.

Mặc định, tất cả các biến được định nghĩa bên ngoài bên ngoài bộ chọn (selector) nào được coi là biến toàn cục. Điều này có nghĩa là chúng có thể được truy xuất từ bất kỳ đâu trong stylesheet của chúng ta. Ví dụ, dưới đây là một biến toàn cục:

1	$bg-color: green;

Mặt khác, các biến cục bộ là những biến được định nghĩa bên trong một bộ chọn (selector). Sau đó, chúng ta sẽ xem làm thế nào để có thể tùy chỉnh hành vi đó. Nhưng bây giờ, hãy xem ví dụ đầu tiên của chúng ta.

Ở đây chúng ta định nghĩa một mixin và sau đó là biến btn-bg-color trong nó. Đây là một biến cục bộ, và do đó chỉ hiện hữu cho các mã bên trong mixin đó:

1	@mixin button-style {
2	$btn-bg-color: lightblue;
3	color: $btn-bg-color;
4	}

Tiếp theo, chúng ta có thể gọi mixin như sau:

1	button {
2	@include button-style;
3	}

Kết quả CSS:

1	button {
2	color: lightblue;
3	}

Tuy nhiên, hãy tưởng tượng, chúng ta cũng muốn sử dụng các biến này (không phải các mixin) trong một bộ chọn khác (selector):

1	.wrap {
2	background: $btn-bg-color;
3	}

Điều này sẽ cho chúng ta thấy các lỗi sau:

1	Undefined variable: "$btn-bg-color".

Đúng như dự kiến, phải không? Chúng ta đã cố gắng truy cập vào một biến của mixin mà có phạm vi cục bộ. Dù vậy, đừng lo lắng, như đã đề cập ở trên, chúng ta sẽ khắc phục vấn đề này trong phần tiếp theo.

Các bộ chọn (selector) lồng nhau

Cũng cần lưu ý rằng, nếu chúng ta khai báo một biến bên trong một bộ chọn (selector), bất kỳ bộ chọn nào được lồng bên trong đều có thể truy xuất nó. Dưới đây là một ví dụ:

.wrap {
    $bg-color: red;
    
    &:after {
        background: lighten($bg-color, 10%);
    }
}
    

Điều này biên dịch thành:

1	.wrap:after {
2	background: #ff3333;
3	}

Tuy nhiên, hãy xem xét các ví dụ bên dưới nơi mà chúng ta định nghĩa một hàm, sau đó sử dụng hàm đó cùng với một bộ chọn (selector) lồng nhau:

@function my-function() {
    $text-color: black;
    @return $text-color;
}
    
.wrap {
    color: my-function();
    
    &:after{
        background: $text-color;
    }
}

Nếu chúng ta cố gắng biên dịch điều này, chúng ta sẽ nhận được lỗi tương tự được thảo luận trước đó. Một lần nữa, điều đó xảy ra bởi vì chúng ta không thể truy cập các biến text-color. Nó không được định nghĩa trực tiếp trong bộ chọn (selector) cha, mà bên trong các hàm mà bộ chọn của chúng ta gọi.

Tên biến

Các biến toàn cục và cục bộ có thể có cùng tên. Để minh hoạ hành vi này, chúng ta sẽ làm việc trên một ví dụ thứ tư:

$text-color: tomato;

@mixin button-style {
    $text-color: lime;
    color: $text-color;
}
    
@mixin link-style {
    $text-color: black;
    color: $text-color;
}

Ở đây chúng ta đã định nghĩa ba biến khác nhau (text-color) có cùng tên. Cái đầu tiên là một biến toàn cục, trong khi hai cái kia là biến cục bộ.

Dưới đây là một số phong cách sử dụng chúng:

button {
    @include button-style;
}
     
a {
    @include link-style;
}
     
.wrap {
    background: $text-color;
}

Và CSS được tạo ra:

button {
    color: lime;
}
    
a {
    color: black;
}
    
.wrap {
    background: tomato;
}

Đó có phải là những gì bạn đã mong đợi?

Hãy nhớ rằng chúng ta sẽ không nhìn thấy những phong cách trừ khi chúng ta biên dịch chúng với phiên bản hiện tại của Sass (3.4). Ví dụ, giả sử rằng chúng ta sử dụng Sass 3.3, đầu ra CSS của chúng ta sẽ trông như thế này:

button {
    color: lime;
}
    
a {
    color: black;
}
    
.wrap {
    background: black;
}

Lưu ý sự khác nhau trong màu nền bộ chọn (selector) .wrap. Điều này xảy ra bởi vì theo phiên bản Sass trước đó (tương tự cho LibSass), nếu chúng ta định nghĩa lại giá trị cục bộ của một biến toàn cục (ví dụ text-color), thì điều này sẽ là một giá trị của biến (toàn cục) mới. Vì vậy, trong ví dụ của chúng ta phong cách được biên dịch phụ thuộc vào thứ tự mà chúng ta khai báo các biến và các mixin.

Nhãn `default`

Nhãn này cho phép chúng ta thiết lập giá trị của một biến trong trường hợp nó đã không được thiết lập hoặc giá trị hiện tại của nó là null (coi như là không được thiết lập). Để giải thích rõ hơn cách chúng ta có thể tận dụng lợi thế của nó trong một kịch bản thực tế, hãy giả sử rằng chúng ta có một dự án với các cấu trúc sau:

Project-Name/
    ├── ...
    ├── css/
    │   └── app.css
    └── scss/
        ├── _config.scss
        ├── _variables.scss
        ├── _mixins.scss
        └── app.scss

Tập tin app.scss trông như thế này:

@import "config";
@import "variables";
@import "mixins";
    
button {
    @include button-style;
}

// more styles

Hãy xem nội dung của các thành phần tập tin.

Đầu tiên tập tin variables.scss chứa các biến của chúng ta:

1	$btn-bg-color: lightblue !default;
2	$btn-bg-color-hover: darken($btn-bg-color, 5%);
3
4	// more variables

Lưu ý rằng nhãn default được gán vào biến btn-bg-color.

Thứ hai, tập tin mixins.scss chứa các mixin của chúng ta:

@mixin button-style ($bg-color: $btn-bg-color, $bg-color-hover: $btn-bg-color-hover) {
    background-color: $bg-color;
    // more styles
      
    &:hover {
        background-color: $bg-color-hover;
        // more styles	
    }
}
    
// more mixins

Sau đó tập tin app.css được tạo ra sẽ trông như sau:

button {
    color: lightblue;
}
    
button:hover {
    background-color: #99cfe0;
}

Vì vậy, các nút của chúng ta kèm theo các phong cách mặc định. Nhưng hãy giả sử rằng chúng ta muốn có tùy chọn để ghi đè lên chúng bằng cách áp dụng các giá trị tùy chỉnh của chúng ta. Để làm điều này, chúng ta có thể gán lại biến các biến mong muốn (mặc định) trong tập tin config.scss:

1	$btn-bg-color: chocolate;
2
3	// more variables

Thiết lập giá trị của biến này thành chocolate sẽ dẫn đến bỏ qua giá trị tương ứng (lightblue) có nhãn default. Vì vậy, các thay đổi CSS được tạo ra như chúng ta có thể nhìn thấy dưới đây:

button {
    color: chocolate;
}
    
button:hover {
    background-color: #bc5e1b;
}

Lưu ý: trong trường hợp chúng ta không thêm nhãn default vào biến btn-bg-color, thì CSS của chúng ta sẽ như sau:

button {
    color: lightblue;
}
    
// hover styles

Nhãn `global`

Nhãn thứ hai này giúp chúng ta thay đổi phạm vi của một biến cục bộ.

Bạn còn nhớ lỗi mà chúng ta đã thấy trong ví dụ đầu tiên chứ? À, điều đó xảy ra bởi vì chúng ta cố gắng sử dụng biến btn-bg-color trong bộ chọn .wrap. Hãy sửa lại ví dụ của chúng ta để thêm nhãn mới này vào: Dưới đây là một số phong cách mới:

@mixin button-style {
    $btn-bg-color: lightblue !global;
    color: $btn-bg-color;
}
    
button {
    @include button-style;
}
    
.wrap {
    background: $btn-bg-color;
}

Như bạn thấy ở dưới, cảm ơn nhãn này, CSS biên dịch mà không gặp lỗi nào:

button {
    color: lightblue;
}
    
.wrap {
    background: lightblue;
}

Nhãn global là hữu ích, nhưng nên nhớ rằng điều đó không phải luôn luôn là cách tốt để thay đổi một phạm vi của biến.

Kiểm tra một biến có tồn tại hay không

Sass cung cấp hai hàm nội quang để kiểm tra xem một biến có tồn tại hay không. Chúng ta có thể sử dụng hàm variable-exists và/hoặc global-variable-exists để kiểm tra các biến cục bộ và/hoặc toàn cục tương ứng có tồn tại không.

Ví dụ, đây là một trường hợp sử dụng phổ biến mà chúng ta định nghĩa một biến có chứa đường dẫn tuyệt đối đến một phông chữ Google. Sau đó, chúng ta chọn nhập phông chữ đó trong stylesheets của chúng ta, nhưng chỉ khi các biến có liên quan đã được khởi tạo.

$google-font: "http://fonts.googleapis.com/css?family=Alegreya";
    
@if(global-variable-exists(google-font)) {
    @import url($google-font);
}

Kết quả:

1	@import url("http://fonts.googleapis.com/css?family=Alegreya");

Kết luận

Trong bài này, tôi đã giới thiệu với các bạn khái niệm phạm vi của biến trong Sass. Để làm cho mọi thứ rõ ràng hơn chúng ta xem xét các ví dụ khác nhau, vì vậy hy vọng rằng bây giờ bạn có một sự hiểu biết tốt về phạm vi hoạt động như thế nào. Bạn có thể tìm thấy các ví dụ của bài viết này trong gist SassMeister này và đừng ngại hỏi bất kỳ câu hỏi nào trong phần bình luận!