Bạn có thể sử dụng biến JS trong CSS không?

Biến CSS (chính thức được gọi là thuộc tính tùy chỉnh) là các giá trị do người dùng xác định có thể được đặt một lần và sử dụng nhiều lần trong toàn bộ cơ sở mã của bạn. Chúng giúp việc quản lý màu sắc, phông chữ, kích thước và giá trị hoạt ảnh trở nên dễ dàng hơn và đảm bảo tính nhất quán giữa các ứng dụng web

Ví dụ: bạn có thể đặt màu thương hiệu làm thuộc tính CSS (

body {
    background-color: var(--primarycolor);
}

7) và sử dụng giá trị này trong bất kỳ thành phần hoặc kiểu nào sử dụng màu thương hiệu của bạn (_______08)

Bên cạnh việc cung cấp mã sạch hơn và không lặp lại, các biến CSS có thể được sử dụng để xây dựng bảng màu, cải thiện khả năng phản hồi và tạo hệ thống kiểu động

Bài đăng này được trích từ hướng dẫn của tôi, CSS Master, hướng dẫn bạn viết CSS tốt hơn, hiệu quả hơn. Bạn cũng sẽ học cách sử dụng thành thạo các công cụ sẽ cải thiện quy trình làm việc của mình và xây dựng các ứng dụng tốt hơn

Xác định biến CSS

Để xác định một thuộc tính tùy chỉnh, hãy chọn một tên và thêm hai dấu gạch nối vào trước tên đó. Bất kỳ ký tự chữ và số nào cũng có thể là một phần của tên. Các ký tự gạch nối (

body {
    background-color: var(--primarycolor);
}

9) và gạch dưới (

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

0) cũng được phép sử dụng. Một loạt các ký tự Unicode có thể là một phần của tên thuộc tính tùy chỉnh. Điều này bao gồm biểu tượng cảm xúc, nhưng để rõ ràng và dễ đọc, hãy sử dụng tên chữ và số

Đây là một ví dụ

--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */

_

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

1 cho trình phân tích cú pháp CSS biết rằng đây là thuộc tính tùy chỉnh. Khi được sử dụng làm biến, công cụ phân tích cú pháp sẽ thay thế thuộc tính bằng giá trị của nó

Tên thuộc tính tùy chỉnh phân biệt chữ hoa chữ thường. Điều đó có nghĩa là 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

2 và 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

3 được coi là hai tên thuộc tính riêng biệt. Đó là một sự khác biệt so với CSS truyền thống, trong đó trường hợp thuộc tính và giá trị không quan trọng. Tuy nhiên, nó phù hợp với quy tắc đặt tên biến trong ECMAScript

Cũng như các thuộc tính khác, chẳng hạn như 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

4 hoặc 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

5, thuộc tính tùy chỉnh CSS phải được xác định trong một khối khai báo. Một mẫu phổ biến là xác định các thuộc tính tùy chỉnh bằng cách sử dụng 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

6 phần tử giả làm bộ chọn

body {
    background-color: var(--primarycolor);
}

1

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

6 là phần tử giả đề cập đến phần tử gốc của tài liệu. Đối với tài liệu HTML, đó là phần tử 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

8 . Đối với tài liệu SVG, đó là phần tử 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

9 . Việc sử dụng 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

6 làm cho các thuộc tính có sẵn ngay lập tức trong tài liệu

Sử dụng biến CSS

Để sử dụng thuộc tính tùy chỉnh làm biến, chúng ta cần sử dụng hàm 

body {
    background-color: var(--primarycolor);
}

61. Ví dụ: nếu muốn sử dụng thuộc tính tùy chỉnh 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

3 làm màu nền, chúng tôi sẽ thực hiện như sau

body {
    background-color: var(--primarycolor);
}

Giá trị thuộc tính tùy chỉnh của chúng tôi sẽ trở thành giá trị tính toán của thuộc tính 

body {
    background-color: var(--primarycolor);
}

63

Cho đến nay, các thuộc tính tùy chỉnh chỉ có thể được sử dụng làm biến để đặt giá trị cho các thuộc tính CSS tiêu chuẩn. Ví dụ: bạn không thể lưu trữ tên thuộc tính dưới dạng biến rồi sử dụng lại tên đó. CSS sau sẽ không hoạt động

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

Bạn cũng không thể lưu trữ một cặp thuộc tính-giá trị dưới dạng một biến và sử dụng lại nó. Ví dụ sau cũng không hợp lệ

body {
    background-color: var(--primarycolor);
}

6

Cuối cùng, bạn không thể nối một biến thành một phần của chuỗi giá trị

body {
    background-color: var(--primarycolor);
}

2

Thuộc tính tùy chỉnh CSS so với. Biến CSS

“Thuộc tính tùy chỉnh” là một tên gọi trong tương lai giải thích cách tính năng này có thể được sử dụng vào một ngày nào đó. Tuy nhiên, điều này có thể thay đổi nếu thông số kỹ thuật của Tiện ích mở rộng CSS được các nhà cung cấp trình duyệt triển khai. Thông số kỹ thuật đó xác định các cách để mở rộng CSS với các kết hợp, chức năng và quy tắc của bộ chọn tùy chỉnh

Chúng tôi thường gọi các thuộc tính tùy chỉnh là "biến" và cho đến nay, đó là cách duy nhất chúng tôi có thể sử dụng chúng. Về lý thuyết, chúng không hoàn toàn là các thuật ngữ có thể hoán đổi cho nhau. Trong thực tế và bây giờ, họ đang. Tôi sẽ chủ yếu sử dụng các thuộc tính tùy chỉnh trong bài đăng này, vì đó là tên riêng của chúng. Tôi sẽ sử dụng biến khi nó làm cho câu rõ ràng hơn

Đặt giá trị dự phòng

Hàm 

body {
    background-color: var(--primarycolor);
}

61 chấp nhận tối đa hai đối số. Đối số đầu tiên phải là tên thuộc tính tùy chỉnh. Đối số thứ hai là tùy chọn, nhưng phải là giá trị khai báo. Giá trị khai báo này hoạt động như một giá trị dự phòng hoặc giá trị mặc định được áp dụng khi giá trị thuộc tính tùy chỉnh không được xác định

Hãy lấy CSS sau

body {
    background-color: var(--primarycolor);
}

4

Nếu 

body {
    background-color: var(--primarycolor);
}

65 được xác định—giả sử giá trị của nó là 

body {
    background-color: var(--primarycolor);
}

66 —thì màu tô cho bất kỳ đường dẫn nào có thuộc tính lớp 

body {
    background-color: var(--primarycolor);
}

67 sẽ có màu tô đỏ cam. Nếu nó không được xác định, vùng tô sẽ có màu xanh da trời đậm

Các giá trị khai báo cũng có thể được lồng vào nhau. Nói cách khác, bạn có thể sử dụng một biến làm giá trị dự phòng cho hàm 

body {
    background-color: var(--primarycolor);
}

68

body {
    background-color: var(--primarycolor);
}

9

Trong CSS ở trên, nếu 

body {
    background-color: var(--primarycolor);
}

69 được xác định, thì màu nền sẽ được đặt thành giá trị của thuộc tính 

body {
    background-color: var(--primarycolor);
}

69. Nếu không, màu nền sẽ là bất kỳ giá trị nào được chỉ định cho 

body {
    background-color: var(--primarycolor);
}

21. Nếu cả hai giá trị đó đều không được xác định, thì màu nền sẽ là giá trị ban đầu cho thuộc tính—trong trường hợp này, 

body {
    background-color: var(--primarycolor);
}

22

Điều tương tự cũng xảy ra khi thuộc tính tùy chỉnh có giá trị không hợp lệ đối với thuộc tính được sử dụng cùng với thuộc tính đó. Hãy xem xét CSS sau

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

4

Trong trường hợp này, giá trị của thuộc tính 

body {
    background-color: var(--primarycolor);
}

23 không phải là màu hợp lệ. Thay vào đó, 

body {
    background-color: var(--primarycolor);
}

24 kế thừa màu của nó từ màu của phần tử 

body {
    background-color: var(--primarycolor);
}

25 

Các thuộc tính tùy chỉnh được giải quyết giống như cách các giá trị CSS khác được giải quyết. Nếu giá trị không hợp lệ hoặc không được xác định, trình phân tích cú pháp CSS sẽ sử dụng giá trị kế thừa nếu thuộc tính có thể kế thừa (chẳng hạn như 

body {
    background-color: var(--primarycolor);
}

26 hoặc 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

5) và giá trị ban đầu nếu thuộc tính không thể kế thừa (như với 

body {
    background-color: var(--primarycolor);
}

63)

Xếp tầng giá trị

Thuộc tính tùy chỉnh cũng tuân thủ các quy tắc của tầng. Các giá trị của chúng có thể bị ghi đè bởi các quy tắc tiếp theo

--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */

1

Trong ví dụ trên, văn bản nội dung của chúng tôi sẽ có màu xám đậm. Chúng tôi cũng có thể đặt lại các giá trị trên cơ sở mỗi bộ chọn. Hãy thêm một vài quy tắc vào CSS này

body {
    background-color: var(--primarycolor);
}

10

Trong trường hợp này, bất kỳ văn bản nào được bọc trong _______229 thẻ phần tử sẽ có màu cam. Nhưng văn bản trong

body {
    background-color: var(--primarycolor);
}

40 hoặc các thành phần khác vẫn có màu xám đậm

Bạn cũng có thể đặt giá trị của thuộc tính tùy chỉnh bằng cách sử dụng thuộc tính 

body {
    background-color: var(--primarycolor);
}

41—ví dụ: 

body {
    background-color: var(--primarycolor);
}

42

Thuộc tính tùy chỉnh và bảng màu

Thuộc tính tùy chỉnh hoạt động đặc biệt tốt để quản lý bảng màu HSL. HSL là viết tắt của màu sắc, độ bão hòa, độ sáng. Đó là một mô hình màu dựa trên ánh sáng tương tự như RGB. Chúng ta có thể sử dụng các giá trị HSL trong CSS nhờ các hàm màu 

body {
    background-color: var(--primarycolor);
}

43 và 

body {
    background-color: var(--primarycolor);
}

44 . Hàm 

body {
    background-color: var(--primarycolor);
}

43 chấp nhận ba đối số. màu sắc, độ bão hòa và độ sáng. Hàm 

body {
    background-color: var(--primarycolor);
}

46 cũng chấp nhận đối số thứ tư, cho biết độ trong suốt alpha của màu (giá trị nằm trong khoảng từ 0 đến 1)

Trong khi hệ thống RGB biểu thị màu theo tỷ lệ của màu đỏ, xanh lá cây và xanh lam, thì HSL sử dụng vòng tròn màu trong đó màu sắc là vị trí độ trên vòng tròn đó và tông màu hoặc sắc thái được xác định bằng cách sử dụng các giá trị độ bão hòa và độ sáng. Độ bão hòa có thể nằm trong khoảng từ 0% đến 100%, trong đó 0% là màu xám và 100% là màu đầy đủ. Độ sáng cũng có thể nằm trong khoảng từ 0% đến 100%, trong đó 0% là màu đen, 100% là màu trắng và 50% là màu bình thường

Chromatic Wheel của CrazyTerabyte từ Openclipart

Trong hệ màu HSL, các màu cơ bản đỏ, lục và lam nằm cách nhau 120 độ ở 0 độ/360 độ, 120 độ và 240 độ. Các màu phụ—lục lam, đỏ tươi và vàng—cũng cách nhau 120 độ, nhưng nằm đối diện với các màu cơ bản, lần lượt ở các góc 180 độ, 300 độ và 60 độ/420 độ. Màu bậc ba, bậc bốn và các màu khác nằm ở khoảng giữa với mức tăng khoảng mười độ. Màu xanh lam, được viết bằng ký hiệu HSL, sẽ là 

body {
    background-color: var(--primarycolor);
}

47

Đơn vị đối số HSL

Khi bạn sử dụng một giá trị không có đơn vị cho đối số đầu tiên của các hàm 

body {
    background-color: var(--primarycolor);
}

43 và 

body {
    background-color: var(--primarycolor);
}

44, trình duyệt sẽ cho rằng đó là một góc tính theo đơn vị độ. Tuy nhiên, bạn có thể sử dụng bất kỳ đơn vị góc CSS nào được hỗ trợ. Màu xanh dương cũng có thể được thể hiện dưới dạng 

body {
    background-color: var(--primarycolor);
}

90, 

body {
    background-color: var(--primarycolor);
}

91 hoặc 

body {
    background-color: var(--primarycolor);
}

92

Đây là nơi mà nó được vui vẻ. Chúng tôi có thể đặt các giá trị màu sắc của mình bằng thuộc tính tùy chỉnh và đặt các sắc thái sáng hơn và tối hơn bằng cách điều chỉnh giá trị độ bão hòa và độ sáng

body {
    background-color: var(--primarycolor);
}

11

CSS ở trên cung cấp cho chúng ta bảng màu hiển thị bên dưới

Đây là phiên bản đơn giản nhưng bạn cũng có thể sử dụng các thuộc tính tùy chỉnh để điều chỉnh giá trị độ bão hòa và độ sáng

Tạo bảng màu mạnh mẽ

Dieter Raber thảo luận về kỹ thuật tạo bảng màu mạnh mẽ trong “ Tạo chủ đề màu với thuộc tính tùy chỉnh, HSL và một chút calc() ”

Một ý tưởng khác là kết hợp các thuộc tính tùy chỉnh và hàm 

body {
    background-color: var(--primarycolor);
}

93 để tạo bảng màu vuông từ màu cơ bản. Hãy tạo một bảng màu hình vuông trong ví dụ tiếp theo của chúng tôi. Một bảng màu hình vuông bao gồm bốn màu cách đều nhau trên bánh xe màu—tức là cách nhau 90 độ

body {
    background-color: var(--primarycolor);
}

12

Chút CSS này mang lại cho chúng ta cách phối màu khá lấy cảm hứng từ vùng nhiệt đới được hiển thị bên dưới

Thuộc tính tùy chỉnh cũng hoạt động tốt với truy vấn phương tiện, như chúng ta sẽ thấy trong phần sau

Sử dụng các biến CSS để tạo bảng Chủ đề tối

Bạn có thể sử dụng Thuộc tính tùy chỉnh CSS để xác định các bộ biến cho cả chủ đề tối và sáng trên trang web của mình

Lấy ví dụ dưới đây về kiểu của một trang, chúng ta có thể thay thế tất cả các màu HSL trong các bộ chọn khác nhau bằng các biến sau khi xác định các thuộc tính tùy chỉnh cho các màu tương ứng trong 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

6

body {
    background-color: var(--primarycolor);
}

13

Tên phù hợp cho các thuộc tính tùy chỉnh đã được sử dụng. Ví dụ: 

body {
    background-color: var(--primarycolor);
}

95 chỉ màu của nền điều hướng, trong khi 

body {
    background-color: var(--primarycolor);
}

96 chỉ màu của nền trước/văn bản của điều hướng

Bây giờ, sao chép bộ chọn 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

6 với nội dung của nó, nhưng thêm thuộc tính chủ đề có giá trị tối

body {
    background-color: var(--primarycolor);
}

14

Chủ đề này sẽ được kích hoạt nếu thuộc tính chủ đề có giá trị tối được thêm vào phần tử 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

8

Giờ đây, chúng tôi có thể xử lý các giá trị của các biến này theo cách thủ công bằng cách giảm giá trị độ sáng của màu HSL để cung cấp chủ đề tối hoặc chúng tôi có thể sử dụng các kỹ thuật khác như bộ lọc CSS như 

body {
    background-color: var(--primarycolor);
}

99 và 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

40, thường được sử dụng để điều chỉnh kết xuất

Thêm mã sau vào 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

41

body {
    background-color: var(--primarycolor);
}

15

Bộ lọc 

body {
    background-color: var(--primarycolor);
}

99 đảo ngược tất cả các màu trong các phần tử đã chọn (mọi phần tử trong trường hợp này). Giá trị của đảo ngược có thể được chỉ định theo tỷ lệ phần trăm hoặc số. Giá trị 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

43 hoặc 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

44 sẽ đảo ngược hoàn toàn giá trị màu sắc, độ bão hòa và độ sáng của phần tử

Bộ lọc 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

40 làm cho một phần tử sáng hơn hoặc tối hơn. Giá trị của 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

46 dẫn đến phần tử tối hoàn toàn

Bộ lọc 

body {
    background-color: var(--primarycolor);
}

99 làm cho một số thành phần rất sáng. Chúng được giảm bớt bằng cách cài đặt

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

48

Một chủ đề tối với các mức độ tối khác nhau

Chuyển đổi chủ đề bằng JavaScript

Bây giờ, hãy sử dụng JavaScript để chuyển đổi giữa chủ đề tối và sáng khi người dùng nhấp vào nút Tối/Sáng . Trong HTML của bạn, hãy thêm một dòng 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

49 trước dấu đóng 

--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */

10 với mã sau

body {
    background-color: var(--primarycolor);
}

16

Tài liệu. documentElement đề cập đến Phần tử DOM gốc của tài liệu — nghĩa là, 

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}

8. Mã này kiểm tra sự tồn tại của một thuộc tính chủ đề bằng cách sử dụng phương pháp 

--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */

12 và thêm thuộc tính có giá trị tối nếu thuộc tính đó không tồn tại, dẫn đến việc chuyển sang chủ đề tối. Nếu không, nó sẽ xóa thuộc tính, dẫn đến việc chuyển sang chủ đề sáng

Ghi chú. Bạn cũng nên sử dụng tính năng này kết hợp với tính năng bảng màu ưu tiên trong CSS, tính năng này có thể được sử dụng để tự động thay đổi chủ đề sáng/tối từ cài đặt hệ điều hành hoặc tác nhân người dùng (trình duyệt) của người dùng. Điều này được thể hiện trong phần tiếp theo

Sử dụng thuộc tính tùy chỉnh và truy vấn phương tiện

Chúng tôi cũng có thể sử dụng các thuộc tính tùy chỉnh với các truy vấn phương tiện. Ví dụ: bạn có thể sử dụng các thuộc tính tùy chỉnh để xác định bảng phối màu sáng và tối

body {
    background-color: var(--primarycolor);
}

17

Tương tự, chúng ta có thể sử dụng các thuộc tính tùy chỉnh để thay đổi kích thước phông chữ cơ bản cho màn hình so với bản in

body {
    background-color: var(--primarycolor);
}

18

Trong trường hợp này, chúng tôi đang sử dụng các thiết bị phù hợp với phương tiện để in và màn hình. Đối với cả hai phương tiện, chúng tôi sẽ sử dụng cỡ chữ cơ bản là 10 đơn vị—pixel cho màn hình, điểm cho bản in. Chúng tôi cũng sẽ sử dụng giá trị của 

--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */

13 để đặt kích thước bắt đầu cho phần tử gốc (

--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */

14). Sau đó, chúng ta có thể sử dụng các đơn vị 

--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */

15 để định kích thước kiểu chữ của mình so với kích thước phông chữ cơ sở

Sử dụng Thuộc tính tùy chỉnh với JavaScript

Nhớ. thuộc tính tùy chỉnh là thuộc tính CSS và chúng ta có thể tương tác với chúng như vậy. Ví dụ: chúng ta có thể sử dụng 

--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */

16 API để kiểm tra xem trình duyệt có hỗ trợ các thuộc tính tùy chỉnh hay không

body {
    background-color: var(--primarycolor);
}

19

Chúng ta cũng có thể sử dụng phương thức 

--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */

17 để đặt giá trị thuộc tính tùy chỉnh

body {
    background-color: var(--primarycolor);
}

0

Sử dụng 

--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */

18 hoạt động tương tự. Chỉ cần chuyển tên thuộc tính tùy chỉnh làm đối số

body {
    background-color: var(--primarycolor);
}

1

Để sử dụng thuộc tính tùy chỉnh làm giá trị với JavaScript, hãy sử dụng hàm 

body {
    background-color: var(--primarycolor);
}

61 với tên thuộc tính làm đối số

body {
    background-color: var(--primarycolor);
}

2

Rất tiếc, bạn không thể đặt thuộc tính tùy chỉnh bằng cú pháp dấu ngoặc vuông hoặc thuộc tính camelCased của đối tượng kiểu. Nói cách khác, cả 

body {
    background-color: var(--primarycolor);
}

100 và 

body {
    background-color: var(--primarycolor);
}

101 đều không hoạt động

Thuộc tính và thành phần tùy chỉnh

Các khung JavaScript như React, Angular và Vue cho phép các nhà phát triển sử dụng JavaScript để tạo các khối HTML có thể chia sẻ, có thể tái sử dụng, thường với CSS được xác định ở cấp thành phần

Dưới đây là ví dụ về thành phần React, được viết bằng JSX, một phần mở rộng cú pháp cho JavaScript

body {
    background-color: var(--primarycolor);
}

3

Tìm hiểu thêm về Khung JavaScript

SitePoint có nhiều tài nguyên về React, Angular và Vue nếu bạn muốn tìm hiểu thêm về cách làm việc với các khung JavaScript. Đối với React, hãy xem Tuần đầu tiên của bạn với React và các bài viết mở rộng về React. Đối với góc cạnh, có Tìm hiểu góc cạnh. Tuần đầu tiên của bạn và rất nhiều bài viết và hướng dẫn về Angular. Đối với Vue, hãy xem Jump Start Vue. js và hơn thế nữa bài viết về Vue

Thành phần React của chúng tôi nhập CSS vào tệp JavaScript. Khi được biên dịch, nội dung của 

body {
    background-color: var(--primarycolor);
}

102 được tải nội tuyến. Đây là một cách có thể để sử dụng điều này với các thuộc tính tùy chỉnh

body {
    background-color: var(--primarycolor);
}

4

Trong ví dụ này, chúng tôi đã sử dụng thuộc tính tùy chỉnh— 

body {
    background-color: var(--primarycolor);
}

103 —cho màu nền của nút, cùng với màu mặc định trong trường hợp 

body {
    background-color: var(--primarycolor);
}

103 không bao giờ được xác định. Từ đây, chúng ta có thể đặt giá trị là 

body {
    background-color: var(--primarycolor);
}

103, trong biểu định kiểu chung hoặc cục bộ thông qua thuộc tính 

body {
    background-color: var(--primarycolor);
}

41

Hãy đặt giá trị dưới dạng React “prop”. Phản ứng đạo cụ (viết tắt của thuộc tính) bắt chước các thuộc tính phần tử. Chúng là một cách để truyền dữ liệu vào thành phần React. Trong trường hợp này, chúng tôi sẽ thêm một chỗ dựa có tên 

body {
    background-color: var(--primarycolor);
}

107

body {
    background-color: var(--primarycolor);
}

5

Bây giờ, chúng tôi cần cập nhật 

body {
    background-color: var(--primarycolor);
}

108 để hỗ trợ thay đổi này

body {
    background-color: var(--primarycolor);
}

6

Trong đoạn mã trên, chúng ta đã thêm một đối tượng 

body {
    background-color: var(--primarycolor);
}

109 chứa tên thuộc tính tùy chỉnh của chúng tôi và đặt giá trị của nó thành giá trị của 

body {
    background-color: var(--primarycolor);
}

107 prop của chúng tôi và một thuộc tính 

body {
    background-color: var(--primarycolor);
}

41 cho nút của chúng ta

Việc sử dụng thuộc tính 

body {
    background-color: var(--primarycolor);
}

41 có thể đi ngược lại với mọi thứ bạn đã được dạy về cách viết CSS. Một điểm hấp dẫn của CSS là chúng ta có thể xác định một bộ kiểu để sử dụng trên nhiều tài liệu HTML và XML. Mặt khác, thuộc tính 

body {
    background-color: var(--primarycolor);
}

41 giới hạn phạm vi của CSS đó đối với phần tử mà nó được áp dụng. Chúng tôi không thể sử dụng lại nó. Và chúng ta không thể tận dụng dòng thác

Nhưng trong kiến ​​trúc giao diện người dùng, dựa trên thành phần, một thành phần có thể được sử dụng trong nhiều ngữ cảnh, bởi nhiều nhóm hoặc thậm chí có thể được chia sẻ giữa các dự án máy khách. Trong những trường hợp đó, bạn có thể muốn kết hợp "phạm vi toàn cầu" của tầng với "phạm vi cục bộ" hẹp do thuộc tính 

body {
    background-color: var(--primarycolor);
}

41 cung cấp

Đặt giá trị thuộc tính tùy chỉnh với thuộc tính 

body {
    background-color: var(--primarycolor);
}

41 giới hạn hiệu ứng đối với trường hợp cụ thể này của thành phần 

body {
    background-color: var(--primarycolor);
}

108. Tuy nhiên, vì chúng tôi đã sử dụng thuộc tính tùy chỉnh thay vì thuộc tính CSS tiêu chuẩn nên chúng tôi vẫn có tùy chọn xác định

body {
    background-color: var(--primarycolor);
}

103 trong biểu định kiểu được liên kết thay vì dưới dạng chỗ dựa thành phần

Phần kết luận

Các thuộc tính tùy chỉnh sử dụng một trong những tính năng tốt nhất của các biến tiền xử lý—biến—và làm cho chúng có nguồn gốc từ CSS. Với các thuộc tính tùy chỉnh, chúng ta có thể

• tạo các thành phần theo chủ đề, có thể tái sử dụng
• dễ dàng điều chỉnh phần đệm, lề và kiểu chữ cho một loạt kích thước khung nhìn và phương tiện
• cải thiện tính nhất quán của các giá trị màu trong CSS của chúng tôi

Các biến có nhiều ứng dụng và đặc biệt hữu ích trong các hệ thống thiết kế dựa trên thành phần

Tôi hy vọng bây giờ bạn đã hiểu rõ hơn về cách sử dụng biến hoặc thuộc tính tùy chỉnh trong CSS. Hãy xem khóa học của tôi, CSS Master, để mở rộng kiến ​​thức về CSS của bạn và nhận thêm các mẹo hữu ích như thế này

Chia sẻ bài viết này

nâu Tiffany

Tiffany B. Brown là một nhà phát triển web và nhà văn kỹ thuật tự do có trụ sở tại Los Angeles. Brown cung cấp dịch vụ tư vấn và phát triển web cho các cơ quan lớn hơn và doanh nghiệp nhỏ. Từng là thành viên của nhóm quan hệ nhà phát triển Opera Software, Brown cũng là đồng tác giả của cuốn sách JumpStart HTML5 của SitePoint. Cô ấy thỉnh thoảng viết về công nghệ phát triển web trên blog của mình. Bạn có thể theo dõi cô ấy trên Twitter tại @webinista

Làm cách nào để lấy giá trị biến JavaScript trong CSS?

Làm cách nào để đặt biến CSS với JS?

JS có thể tương tác với CSS không?

Bạn có thể sử dụng các biến JavaScript trong HTML không?