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 ECMAScriptCũ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ọnbody {
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ệuSử 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ư saubody {
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];
}
63Cho đế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];
}
6Cuố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];
}
2Thuộ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 địnhHãy lấy CSS sau
body {
background-color: var[--primarycolor];
}
4Nế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 đậmCá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];
}
68body {
background-color: var[--primarycolor];
}
9Trong 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 */
}
4Trong 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 */
1Trong 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];
}
10Trong 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 đậmBạ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];
}
42Thuộ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];
}
11CSS ở 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];
}
12Chú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 */
}
6body {
background-color: var[--primarycolor];
}
13Tê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ướngBâ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ốibody {
background-color: var[--primarycolor];
}
14Chủ đề 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 */
}
8Giờ đâ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 */
}
41body {
background-color: var[--primarycolor];
}
15Bộ 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ànBộ 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 */
}
48Mộ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ã saubody {
background-color: var[--primarycolor];
}
16Tà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ángGhi 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];
}
17Tươ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];
}
18Trong 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ôngbody {
background-color: var[--primarycolor];
}
19Chú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ỉnhbody {
background-color: var[--primarycolor];
}
0Sử 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];
}
2Rấ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 độngThuộ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];
}
3Tì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ỉnhbody {
background-color: var[--primarycolor];
}
4Trong 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];
}
41Hã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];
}
107body {
background-color: var[--primarycolor];
}
5Bây giờ, chúng tôi cần cập nhật
body {
background-color: var[--primarycolor];
}
108 để hỗ trợ thay đổi nàybody {
background-color: var[--primarycolor];
}
6Trong đ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 taViệ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ácNhư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ầnPhầ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