Cờ `!global` trong SASS

Bài viết này giải thích về cờ !global trong SASS.

Chúng tôi sẽ giải thích chi tiết cơ chế, ví dụ sử dụng và những lưu ý khi dùng cờ !global.

YouTube Video

Cờ !global trong SASS

Trong SASS, cờ !global được dùng để kiểm soát phạm vi của biến. Khi hiểu đúng và dùng hợp lý cờ này, bạn có thể tránh các hành vi không mong muốn trong mã và nâng cao tính bảo trì.

Cờ !global là gì?

Thông thường, các biến trong SASS đều có phạm vi. Mặc định, biến chỉ có giá trị trong phạm vi nơi nó được khai báo. Nói cách khác, nếu một biến được khai báo trong hàm hoặc mixin, nó sẽ không thể sử dụng bên ngoài phạm vi đó.

Tuy nhiên, nếu sử dụng cờ !global, bạn có thể gán trực tiếp biến đó vào phạm vi toàn cục. Điều này cho phép biến được chia sẻ giữa các phạm vi khác nhau.

Không sử dụng cờ !global

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue; // Local variable (does not overwrite the global variable)
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // red
10}

• Trong đoạn mã này, $color được khai báo ở phạm vi toàn cục, nên thuộc tính color của .change vẫn là đỏ.

CSS xuất ra

1.change {
2    color: red;
3}

Với cờ !global

Hãy thêm cờ !global vào cùng ví dụ trên.

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue !global; // Overwrite the global variable
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // blue
10}

• Trong trường hợp này, khi cờ !global được chỉ định, giá trị của $color sẽ được cập nhật ở phạm vi toàn cục. Kết quả là thuộc tính color của .change sẽ trở thành xanh da trời.

CSS xuất ra

1.change {
2    color: blue;
3}

Lưu ý khi sử dụng

• Ô nhiễm phạm vi toàn cục Việc lạm dụng cờ !global có thể dẫn đến xung đột phạm vi không mong muốn và gây ô nhiễm phạm vi toàn cục. Điều này đặc biệt quan trọng trong các dự án lớn, nơi nên tránh lạm dụng cờ này.

• Ghi đè giá trị ngoài ý muốn Khi sử dụng cờ !global, các biến cùng tên có thể bị ghi đè ngoài ý muốn ở nơi khác. Vì vậy, việc đặt tên biến nhất quán và rõ ràng là cần thiết.

Ví dụ thực tiễn

Dưới đây là ví dụ về cách sử dụng đúng cờ !global.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4@mixin set-theme($primary, $secondary) {
 5    $primary-color: $primary !global;
 6    $secondary-color: $secondary !global;
 7}
 8
 9.light-theme {
10    @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14    @include set-theme(#333333, #666666);
15}
16
17body {
18    background-color: $primary-color;
19    color: $secondary-color;
20}

• Trong mã này, mixin set-theme có thể được sử dụng để chuyển đổi chủ đề một cách linh hoạt. Vì các biến toàn cục được cập nhật cho từng chủ đề, nên có thể quản lý nhiều chủ đề một cách linh hoạt.

CSS xuất ra

1body {
2    background-color: #333333;
3    color: #666666;
4}

Những sai lầm phổ biến và cách khắc phục

Quên thêm cờ

Nếu bạn quên thêm !global, biến có thể không được cập nhật trong phạm vi mong muốn. Hãy chắc chắn thêm rõ ràng cờ khi cần thiết.

1@mixin update-color() {
2    $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6    $color: green !global; // Overwrite the global variable
7}

Phụ thuộc quá mức vào phạm vi toàn cục

Quá phụ thuộc vào cờ !global có thể làm phức tạp việc gỡ lỗi và bảo trì mã nguồn. Chỉ nên sử dụng ở mức tối thiểu.

Tóm tắt

Cờ !global trong SASS rất hữu ích trong một số tình huống nhất định, nhưng cần sử dụng cẩn trọng. Với việc hiểu rõ phạm vi của biến và quản lý đúng phạm vi toàn cục, bạn có thể tạo ra mã SASS dễ bảo trì.

Sau đây là những điểm chính cần ghi nhớ:.

1. Biến mặc định phụ thuộc vào phạm vi của chúng.

2. Cờ !global cho phép bạn cập nhật biến trong phạm vi toàn cục.

3. Giữ việc sử dụng cờ ở mức tối thiểu và tránh ghi đè ngoài ý muốn bất cứ khi nào có thể.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video