Một tùy chọn là các biến CSS.
Đây không phải là một biến SASS có sẵn trong tiền xử lý, mà là một cái gì đó có sẵn trong trình duyệt trong thời gian chạy. Do đó, bạn có thể nhận/đặt nó với JavaScript và kiểu CSS sẽ cập nhật dựa trên giá trị biến.
Chẳng hạn, giả sử thành phần của bạn cho phép bạn đặt màu văn bản thông qua biến JavaScript
element.style.setProperty["--text-color", textColor];
7:CSS:
p { color: var[--text-color]; }
JS:
element.style.setProperty["--text-color", textColor];
Và nếu bạn muốn tính linh hoạt/khả năng duy trì của các biến trong SCSS của mình - bạn có thể có các biến trỏ đến các biến JS/CSS.
SCSS:
// _vars.scss
$text-color: var[--text-color];
// _styles.scss
p { color: $text-color }
Đảm bảo xác minh rằng tính năng này có mức độ hỗ trợ trình duyệt của bạn.
Đôi khi bạn cần chia sẻ các biến giữa CSS [hoặc SCSS] và TypeScript, ví dụ, nếu bạn có danh sách các màu trong tệp SCSS của mình và cần kiểm tra tên biến trong TypeScript để chắc chắn là màu có sẵn.
Hãy tưởng tượng một thành phần Vue có một thuộc tính để đặt màu nền:
1 |
|
Trong thành phần này, nếu bạn đặt màu thuộc tính và giá trị có sẵn, hãy thêm một lớp cho màu đó, ví dụ, nếu màu prop là
element.style.setProperty["--text-color", textColor];
8 thêm lớp element.style.setProperty["--text-color", textColor];
9, nhưng nếu giá trị của prop là // _vars.scss
$text-color: var[--text-color];
// _styles.scss
p { color: $text-color }
0 Thêm bất kỳ lớp nào liên quan đến màu sắc vì // _vars.scss
$text-color: var[--text-color];
// _styles.scss
p { color: $text-color }
0 không phải là một màu có sẵn.Hãy nhớ rằng, có lẽ chúng ta có một tệp SCSS nơi chúng ta xác định rằng các lớp đó, một cái gì đó giống như:
1 | $primary: #333; |
Chúng tôi có thể cải thiện tệp này để tạo chương trình lớp bằng cách sử dụng sức mạnh của SCSS:
1 | ________số 8 |
Cách tạo ra các lớp màu này cho phép chúng ta đơn giản hóa cách chúng ta thêm một màu mới. Chúng ta chỉ nên thêm màu mới vào
// _vars.scss
$text-color: var[--text-color];
// _styles.scss
p { color: $text-color }
2 và chúng ta sẽ có lớp màu
1 | $primary: #333; |
Chúng tôi có thể cải thiện tệp này để tạo chương trình lớp bằng cách sử dụng sức mạnh của SCSS:😔
1
2
3
4
5
6
7
8
9
10
11
12
________số 8
We will add an
// _vars.scss
$text-color: var[--text-color];
// _styles.scss
p { color: $text-color }
3
stament to our // _vars.scss
$text-color: var[--text-color];
// _styles.scss
p { color: $text-color }
6 fileCách tạo ra các lớp màu này cho phép chúng ta đơn giản hóa cách chúng ta thêm một màu mới. Chúng ta chỉ nên thêm màu mới vào 2 và chúng ta sẽ có lớp màu | 0 |
Nhưng nếu bạn nhớ trong thành phần của chúng tôi, chúng tôi có chiều rộng mảng, danh sách các màu có sẵn, nếu chúng tôi không thêm màu sắc mới vào thành phần, chúng tôi không thể sử dụng nó 😔
Nhưng có một cách để chỉ cần thêm màu sắc trong SCSS và cũng sử dụng danh sách trong TypeScript:
// _vars.scss
$text-color: var[--text-color];
// _styles.scss
p { color: $text-color }
3.
1 |
|
Trong thành phần này, nếu bạn đặt màu thuộc tính và giá trị có sẵn, hãy thêm một lớp cho màu đó, ví dụ, nếu màu prop là
element.style.setProperty["--text-color", textColor];
8 thêm lớp element.style.setProperty["--text-color", textColor];
9, nhưng nếu giá trị của prop là // _vars.scss
$text-color: var[--text-color];
// _styles.scss
p { color: $text-color }
0 Thêm bất kỳ lớp nào liên quan đến màu sắc vì // _vars.scss
$text-color: var[--text-color];
// _styles.scss
p { color: $text-color }
0 không phải là một màu có sẵn.
Hãy nhớ rằng, có lẽ chúng ta có một tệp SCSS nơi chúng ta xác định rằng các lớp đó, một cái gì đó giống như: | 1 |
$primary: #333;
$alert: #900;
$custom: #090;
.color-primary {
background: $primary;
}
.color-alert {
background: $alert;
}
.color-custom {
background: $custom;
}