Đặt CSS biến

Question

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

Nội dung chính Show

Xác định biến CSS
Sử dụng biến CSS
Thuộc tính tùy chỉnh CSS so với. Biến CSS
Đặt giá trị dự phòng
Xếp tầng giá trị
Thuộc tính tùy chỉnh và bảng màu
Đơn vị đối số HSL
Tạo bảng màu mạnh mẽ
Sử dụng các biến CSS để tạo bảng Chủ đề tối
Sử dụng thuộc tính tùy chỉnh và truy vấn phương tiện
Sử dụng Thuộc tính tùy chỉnh với JavaScript
Thuộc tính và thành phần tùy chỉnh
Tìm hiểu thêm về Khung JavaScript
Phần kết luận
Chia sẻ bài viết này
Var() trong CSS là gì?
Làm cách nào để sử dụng các biến CSS trong JavaScript?
Làm cách nào để sử dụng biến trong CSS nội tuyến?
Tôi có nên sử dụng các biến trong CSS không?

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 (

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

8)

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 và tạo các 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. Dấu gạch ngang (

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

9) và dấu 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. 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

:root {
  --primarycolor: #0ad0f9ff;
}

: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

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

1. 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 của mình 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

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

3

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ệ

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

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ị

:root {
    --base-font-size: 10;
}
body {
    font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}

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

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

1 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

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

Nếu

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

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

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

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

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

7 sẽ có màu đỏ 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

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

8

body {
    background-color: var(--books-bg, var(--arts-bg));
}

Trong CSS ở trên, nếu

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

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

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

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

:root {
    --base-font-size: 10;
}
body {
    font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}

1. 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,

:root {
    --base-font-size: 10;
}
body {
    font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}

2

Đ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 {
    --text-primary: #600;
    --footer-link-hover: #0cg; /* Not a valid color value */
}
body {
    color: var(--text-primary);
}
a:link {
    color: blue;
}
a:hover {
    color: red;
}
footer a:hover {
    color: var(--footer-link-hover);
}

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

:root {
    --base-font-size: 10;
}
body {
    font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}

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

:root {
    --base-font-size: 10;
}
body {
    font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}

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

:root {
    --base-font-size: 10;
}
body {
    font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}

5

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ư

:root {
    --base-font-size: 10;
}
body {
    font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}

6 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

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

3)

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

:root {
    --text-color: #190736; /* navy */
}
body {
    --text-color: #333;  /* dark gray */
}
body {
    color: var(--text-color);
}

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

:root {
  --primarycolor: #0ad0f9ff;
}

0

Trong trường hợp này, bất kỳ văn bản nào được bao bọc trong

:root {
    --base-font-size: 10;
}
body {
    font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}

9 thẻ phần tử sẽ có màu cam. Nhưng văn bản trong

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

0 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

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

1—ví dụ:

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

2

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

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

3 và

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

4. Hàm

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

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

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

6 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 thứ cấp—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 da trời, được viết bằng ký hiệu HSL, sẽ là

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

7

Đơ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

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

3 và

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

4, 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ỳ. Màu xanh dương cũng có thể được biểu thị bằng

body {
    background-color: var(--books-bg, var(--arts-bg));
}

0,

body {
    background-color: var(--books-bg, var(--arts-bg));
}

1 hoặc

body {
    background-color: var(--books-bg, var(--arts-bg));
}

2

Đâ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

:root {
  --primarycolor: #0ad0f9ff;
}

1

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(--books-bg, var(--arts-bg));
}

3 để 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 độ

:root {
  --primarycolor: #0ad0f9ff;
}

2

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 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 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

:root {
  --primarycolor: #0ad0f9ff;
}

3

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(--books-bg, var(--arts-bg));
}

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

body {
    background-color: var(--books-bg, var(--arts-bg));
}

6 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

:root {
  --primarycolor: #0ad0f9ff;
}

4

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(--books-bg, var(--arts-bg));
}

9 và

:root {
    --text-primary: #600;
    --footer-link-hover: #0cg; /* Not a valid color value */
}
body {
    color: var(--text-primary);
}
a:link {
    color: blue;
}
a:hover {
    color: red;
}
footer a:hover {
    color: var(--footer-link-hover);
}

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

Thêm mã sau vào

:root {
    --text-primary: #600;
    --footer-link-hover: #0cg; /* Not a valid color value */
}
body {
    color: var(--text-primary);
}
a:link {
    color: blue;
}
a:hover {
    color: red;
}
footer a:hover {
    color: var(--footer-link-hover);
}

1

:root {
  --primarycolor: #0ad0f9ff;
}

5

Bộ lọc

body {
    background-color: var(--books-bg, var(--arts-bg));
}

9 đảo ngược tất cả các màu trong các thành phần đã chọn (mọi thành phần 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 {
    --text-primary: #600;
    --footer-link-hover: #0cg; /* Not a valid color value */
}
body {
    color: var(--text-primary);
}
a:link {
    color: blue;
}
a:hover {
    color: red;
}
footer a:hover {
    color: var(--footer-link-hover);
}

3 hoặc

:root {
    --text-primary: #600;
    --footer-link-hover: #0cg; /* Not a valid color value */
}
body {
    color: var(--text-primary);
}
a:link {
    color: blue;
}
a:hover {
    color: red;
}
footer a:hover {
    color: var(--footer-link-hover);
}

4 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 {
    --text-primary: #600;
    --footer-link-hover: #0cg; /* Not a valid color value */
}
body {
    color: var(--text-primary);
}
a:link {
    color: blue;
}
a:hover {
    color: red;
}
footer a:hover {
    color: var(--footer-link-hover);
}

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

:root {
    --text-primary: #600;
    --footer-link-hover: #0cg; /* Not a valid color value */
}
body {
    color: var(--text-primary);
}
a:link {
    color: blue;
}
a:hover {
    color: red;
}
footer a:hover {
    color: var(--footer-link-hover);
}

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

Bộ lọc

body {
    background-color: var(--books-bg, var(--arts-bg));
}

9 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 {
    --text-primary: #600;
    --footer-link-hover: #0cg; /* Not a valid color value */
}
body {
    color: var(--text-primary);
}
a:link {
    color: blue;
}
a:hover {
    color: red;
}
footer a:hover {
    color: var(--footer-link-hover);
}

8

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 {
    --text-primary: #600;
    --footer-link-hover: #0cg; /* Not a valid color value */
}
body {
    color: var(--text-primary);
}
a:link {
    color: blue;
}
a:hover {
    color: red;
}
footer a:hover {
    color: var(--footer-link-hover);
}

9 trước dấu đóng

:root {
    --text-color: #190736; /* navy */
}
body {
    --text-color: #333;  /* dark gray */
}
body {
    color: var(--text-color);
}

0 với mã sau

:root {
  --primarycolor: #0ad0f9ff;
}

6

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 thức

:root {
    --text-color: #190736; /* navy */
}
body {
    --text-color: #333;  /* dark gray */
}
body {
    color: var(--text-color);
}

2 và thêm thuộc tính có giá trị tối nếu thuộc tính đó không tồn tại, khiến 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

:root {
  --primarycolor: #0ad0f9ff;
}

7

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

:root {
  --primarycolor: #0ad0f9ff;
}

8

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

:root {
    --text-color: #190736; /* navy */
}
body {
    --text-color: #333;  /* dark gray */
}
body {
    color: var(--text-color);
}

3 để đặt kích thước bắt đầu cho phần tử gốc của chúng tôi (

:root {
    --text-color: #190736; /* navy */
}
body {
    --text-color: #333;  /* dark gray */
}
body {
    color: var(--text-color);
}

4). Sau đó, chúng ta có thể sử dụng

:root {
    --text-color: #190736; /* navy */
}
body {
    --text-color: #333;  /* dark gray */
}
body {
    color: var(--text-color);
}

5 đơn vị để đị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 API

:root {
    --text-color: #190736; /* navy */
}
body {
    --text-color: #333;  /* dark gray */
}
body {
    color: var(--text-color);
}

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

:root {
  --primarycolor: #0ad0f9ff;
}

9

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

:root {
    --text-color: #190736; /* navy */
}
body {
    --text-color: #333;  /* dark gray */
}
body {
    color: var(--text-color);
}

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

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

0

Sử dụng

:root {
    --text-color: #190736; /* navy */
}
body {
    --text-color: #333;  /* dark gray */
}
body {
    color: var(--text-color);
}

8 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

:root {
    --text-color: 'color: orange'; /* Invalid property value */
}
body {
    var(--text-color); /* Invalid use of a property */
}

1 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ả

:root {
  --primarycolor: #0ad0f9ff;
}

00 và

:root {
  --primarycolor: #0ad0f9ff;
}

01 đề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

:root {
  --primarycolor: #0ad0f9ff;
}

02 được tải nội dòng. Đâ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—

:root {
  --primarycolor: #0ad0f9ff;
}

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

:root {
  --primarycolor: #0ad0f9ff;
}

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

:root {
  --primarycolor: #0ad0f9ff;
}

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

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

1

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 giá đỡ có tên

:root {
  --primarycolor: #0ad0f9ff;
}

07

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

5

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

:root {
  --primarycolor: #0ad0f9ff;
}

08 để 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

:root {
  --primarycolor: #0ad0f9ff;
}

09 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 _______11_______07 prop và một thuộc tính

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

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

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

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

1 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

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

1 giới hạn phạm vi của CSS đó đối với phần tử mà nó được áp dụng cho. 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

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

1 cung cấp

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

.btn__call-to-action {
    background: var(--accent-color, deepskyblue);
}

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

:root {
  --primarycolor: #0ad0f9ff;
}

08. 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

:root {
  --primarycolor: #0ad0f9ff;
}

03 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 Phần mềm Opera, 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

Var() trong CSS là gì?

var() Hàm CSS var() có thể được sử dụng để chèn giá trị của thuộc tính tùy chỉnh (đôi khi được gọi là "biến CSS") thay vì bất kỳ phần nào của giá trị . .

Làm cách nào để sử dụng các biến CSS trong JavaScript?

Phương thức getComputingStyle() cung cấp một đối tượng bao gồm tất cả các kiểu được áp dụng cho phần tử đích. phương thức getPropertyValue() được sử dụng để lấy thuộc tính mong muốn từ các kiểu được tính toán. setProperty() dùng để thay đổi giá trị của biến CSS .

Làm cách nào để sử dụng biến trong CSS nội tuyến?

Để xác định Biến CSS, cần thêm biến đó vào. khai báo gốc nếu nó là toàn cầu (. root tương đương với

Tôi có nên sử dụng các biến trong CSS không?

Biến CSS, được gọi chính xác hơn là thuộc tính tùy chỉnh CSS, đang cập bến Chrome 49. Chúng có thể hữu ích để giảm sự lặp lại trong CSS và cũng cho các hiệu ứng thời gian chạy mạnh mẽ như chuyển đổi chủ đề và các tính năng CSS có khả năng mở rộng/đa dạng hóa trong tương lai .

programming css

Đặt CSS biến

Xác định biến CSS

Sử dụng biến CSS

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

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

Xếp tầng giá trị

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

Đơn vị đối số HSL

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

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

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

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

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

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

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

Phần kết luận

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

Var() trong CSS là gì?

Làm cách nào để sử dụng các biến CSS trong JavaScript?

Làm cách nào để sử dụng biến trong CSS nội tuyến?

Tôi có nên sử dụng các biến trong CSS không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội