Các biến CSS là một bổ sung rất được hoan nghênh cho ngôn ngữ này, mặc dù chúng rất cơ bản. Chắc chắn chúng ta có thể sử dụng SASS hoặc bút stylus nhưng các ngôn ngữ không bao giờ nên dựa vào các nhà phát triển dựa vào các khung và bộ công cụ để thực hiện những gì chúng ta biết là mình cần. Và giống như mọi phần khác của trang web, bạn có thể nhận và thao tác các giá trị biến CSS -- hãy xem cách thực hiện

Cài đặt và sử dụng một biến CSS

Phương pháp truyền thống sử dụng các biến CSS gốc là thêm nó vào root

:root {
    --my-variable-name: #999999;
}

Đơn giản. Cũng nên nhớ rằng các biến CSS không mạnh bằng các biến trong SASS, bút stylus, v.v.

Nhận giá trị của biến CSS

Để truy xuất giá trị của một biến CSS trong cửa sổ, bạn sử dụng getComputedStyle và getPropertyValue

getComputedStyle(document.documentElement)
    .getPropertyValue('--my-variable-name'); // #999999

Giá trị biến được tính toán trở lại dưới dạng một chuỗi

Đặt giá trị của biến CSS

Để đặt giá trị của một biến CSS bằng JavaScript, bạn sử dụng setProperty trên thuộc tính style của documentElement

document.documentElement.style
    .setProperty('--my-variable-name', 'pink');

Bạn sẽ thấy ngay giá trị mới được áp dụng ở mọi nơi mà biến được sử dụng

Tôi đã lường trước được nhu cầu cần những thủ thuật kinh tởm để thực hiện thao tác biến CSS bằng JavaScript, vì vậy tôi rất vui vì nó dễ dàng như mô tả ở trên

Nếu bạn biết một chút về CSS, rất có thể bạn đã nghe nói về các bộ tiền xử lý CSS như Sass và Less. Bạn có thể đã sử dụng chúng trong các dự án của mình bất kể khuôn khổ lựa chọn giao diện người dùng của bạn là gì. Hoặc có thể bạn chưa sử dụng và bạn chỉ sử dụng CSS cũ đơn giản

Dù bằng cách nào, điểm bán hàng chính của các bộ tiền xử lý đó là bạn có thể sử dụng các biến giống như trong ngôn ngữ lập trình. Bạn khai báo một biến, gán cho nó một giá trị và sử dụng nó trên toàn bộ tài liệu để dễ dàng bảo trì

Trong hướng dẫn này, chúng tôi sẽ giới thiệu sơ lược về khái niệm này bằng cách trước tiên làm sáng tỏ các biến CSS và sau đó xây dựng hai dự án đơn giản sử dụng nó. Nếu muốn bắt tay vào hành động càng sớm càng tốt, bạn có thể tìm mã của cả hai dự án trên CodePen ( tại đây và here).

Cần có một số kiến ​​thức CSS cơ bản để làm theo hướng dẫn này. Không có gì khó chịu, hãy đi sâu vào

Những gì chúng ta sẽ xây dựng

Để củng cố kiến ​​thức của chúng ta về các biến CSS, chúng ta sẽ xây dựng hai dự án rất đơn giản. Phần đầu tiên sẽ trình bày cách tạo các biến thể của nút. Khái niệm này phổ biến trong Bootstrap, nơi các thành phần nhất định chia sẻ các quy tắc CSS cung cấp cho chúng một thiết kế mặc định nhưng được phân biệt bằng màu sắc hoặc các thuộc tính khác. Dự án thứ hai sẽ là thiết kế dựa trên chủ đề — cụ thể là chủ đề sáng và tối do JavaScript điều khiển

Cách sử dụng các biến CSS

Còn được gọi là thuộc tính tùy chỉnh hoặc biến xếp tầng, biến CSS có các trường hợp sử dụng bí ẩn. Một trong những cách phổ biến nhất là quản lý các trang web trong đó có nhiều giá trị tương tự như trong tài liệu. Điều này giúp giảm ma sát liên quan đến việc tái cấu trúc hoặc cập nhật mã của bạn

Những thứ cơ bản

Để khai báo một biến trong CSS, hãy đặt tên cho biến, sau đó thêm hai dấu gạch ngang (–) làm tiền tố

element {
  --bg-color: #405580;
}

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

7 ở đây đề cập đến bất kỳ phần tử HTML hợp lệ nào có quyền truy cập vào tệp CSS này

Tên biến là

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

8 và hai dấu gạch nối được thêm vào. Để truy cập một biến, hãy sử dụng ký hiệu

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

9 và nhập tên biến

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

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

0 sẽ lấy giá trị của

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

8 mà chúng ta đã khai báo trước đó. Thông thường, các nhà phát triển khai báo tất cả các biến của họ trong phần tử

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

2 của tài liệu

________số 8_______

Khai báo các biến của bạn ở đây sẽ hiển thị chúng trong phạm vi toàn cầu và có sẵn cho toàn bộ tệp

Kế thừa biến CSS

Cũng giống như CSS truyền thống, các biến CSS về bản chất là xếp tầng — tôi. e. , họ kế thừa. Giá trị của phần tử được kế thừa từ phần tử gốc nếu không có thuộc tính tùy chỉnh nào được xác định

HTML

  
  

    
Heading text
    
Paragraph text
  

CSS

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

Phần đệm của các lớp

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

3 và

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

4 sẽ khác bởi vì, theo mặc định, bộ chọn mục tiêu sẽ kế thừa từ lớp cha gần nhất của nó. Trong trường hợp này, bộ chọn

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

4 kế thừa giá trị đệm từ cha trực tiếp của nó,

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

6, với giá trị là

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

7 thay vì

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

8

Giá trị dự phòng và không hợp lệ

Khi sử dụng thuộc tính tùy chỉnh, bạn có thể tham chiếu thuộc tính tùy chỉnh không được xác định trong tài liệu. Bạn có thể chỉ định một giá trị dự phòng sẽ được sử dụng thay cho giá trị đó. Cú pháp cung cấp giá trị dự phòng vẫn là ký hiệu

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

9. Thêm danh sách các giá trị được phân tách bằng dấu phẩy sau giá trị đầu tiên. Mọi thứ sau dấu phẩy đầu tiên được coi là giá trị dự phòng

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

Bạn có nhận thấy rằng tôi viết sai chính tả giá trị

  
  

    
Heading text
    
Paragraph text
  

0 không? . Nếu vì lý do nào đó, nó không thể tìm thấy giá trị dự phòng, thì giá trị tiếp theo sẽ bắt đầu, v.v. Trình duyệt sẽ sử dụng màu mặc định ban đầu nếu không tìm thấy bất kỳ giá trị nào được cung cấp

Một trường hợp sử dụng khác cho giá trị dự phòng là khi giá trị không hợp lệ đối với thuộc tính được cung cấp

:root { 
  --text-danger: 16px; 
} 

body { 
  color: var(--text-color); 
} 

Trong đoạn mã này, thuộc tính tùy chỉnh

  
  

    
Heading text
    
Paragraph text
  

1 được xác định với giá trị là

  
  

    
Heading text
    
Paragraph text
  

2, điều này không sai về mặt kỹ thuật. Nhưng khi trình duyệt thay thế giá trị của

  
  

    
Heading text
    
Paragraph text
  

3 thay cho

  
  

    
Heading text
    
Paragraph text
  

4, nó sẽ cố gắng sử dụng giá trị của

  
  

    
Heading text
    
Paragraph text
  

2, đây không phải là giá trị thuộc tính hợp lệ cho màu sắc trong CSS

Trình duyệt coi nó là một giá trị không hợp lệ và kiểm tra xem thuộc tính màu có được kế thừa bởi phần tử cha hay không. Nếu có, nó sử dụng nó. Mặt khác, nó sẽ trở lại màu mặc định (màu đen trong hầu hết các trình duyệt)

Bây giờ hãy đi sâu vào dự án đầu tiên của chúng tôi

Dự án 1. Xây dựng một biến thể nút

Trong các khung CSS như Bootstrap, các biến giúp chia sẻ thiết kế cơ sở giữa các phần tử dễ dàng hơn nhiều. Tham gia lớp

  
  

    
Heading text
    
Paragraph text
  

6, biến màu nền của phần tử thành màu đỏ và màu của chính nó thành màu trắng. Trong dự án đầu tiên này, bạn sẽ xây dựng một cái gì đó tương tự

Bắt đầu bằng cách tạo một thư mục dự án. Trong thiết bị đầu cuối của bạn, bạn có thể chạy các lệnh này lần lượt

---

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các sự cố trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

---

# create a base project folder
mkdir css-variables-pro 

# change directory to the created folder 
cd css-variables-pro

# create a new folder for the first project
mkdir button-variations

# change directory to the new folder
cd button-variations

# create two files
touch variations.html variations.css

Thao tác này sẽ tạo một thư mục dự án có tên là

  
  

    
Heading text
    
Paragraph text
  

7. Thư mục này sẽ chứa hai dự án mà bạn sẽ xây dựng. Tiếp theo, tạo một thư mục con có tên là

  
  

    
Heading text
    
Paragraph text
  

8 và hai tệp cho dự án đầu tiên

Dán đoạn mã sau vào tệp

  
  

    
Heading text
    
Paragraph text
  

9 bạn đã tạo

  
    
    
    
    
    
  
  
    

      

        
CSS Color Variations
        

          Primary
          Secondary
          Link
          Success
          Error
        
      
    
  

Cấu trúc của đánh dấu này là khá chuẩn. Lưu ý cách mỗi phần tử nút có hai lớp. lớp

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

0 và lớp thứ hai. Trong trường hợp này, chúng ta sẽ gọi lớp

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

0 là lớp cơ sở và lớp thứ hai là lớp bổ trợ

Dán đoạn mã này vào tệp

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

2 của bạn

/* css-variables-pro/button-variations/variations.css */

* {
 border: 0;
}
:root {
 --primary: #0076c6;
 --secondary: #333333;
 --error: #ce0606;
 --success: #009070;
 --white: #ffffff;
}
/* base style for all buttons */
.btn {
 padding: 1rem 1.5rem;
 background: transparent;
 font-weight: 700;
 border-radius: 0.5rem;
 cursor: pointer;
 outline: none;
}
/* variations */
.primary {
 background: var(--primary);
 color: var(--white);
}
.secondary {
 background: var(--secondary);
 color: var(--white);
}
.success {
 background: var(--success);
 color: var(--white);
}
.error {
 background: var(--error);
 color: var(--white);
}
.link {
 color: var(--primary);
}

Lớp

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

0 chứa các kiểu cơ sở cho tất cả các nút và các biến thể xuất hiện trong đó các lớp công cụ sửa đổi riêng lẻ có quyền truy cập vào màu của chúng, được xác định ở cấp độ

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

2 của tài liệu. Điều này cực kỳ hữu ích không chỉ cho các nút mà còn cho các thành phần khác trong HTML của bạn có thể kế thừa các thuộc tính tùy chỉnh

Ví dụ: nếu ngày mai bạn quyết định giá trị cho thuộc tính tùy chỉnh

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

5 quá buồn tẻ đối với màu đỏ, bạn có thể dễ dàng chuyển nó lên thành

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

6 và thế là xong. tất cả các yếu tố sử dụng thuộc tính tùy chỉnh này được cập nhật với một thay đổi duy nhất. Tôi không biết về bạn, nhưng điều đó nghe giống như một liều thuốc giảm căng thẳng đối với tôi

Đây là dự án đầu tiên của bạn sẽ trông như thế nào

dự án 2. Xây dựng chủ đề trên toàn trang web

Trong dự án thứ hai, chúng tôi sẽ xây dựng chủ đề sáng và tối. Chủ đề sáng sẽ có hiệu lực theo mặc định trừ khi người dùng đã đặt hệ thống của họ thành chủ đề tối. Trên trang, chúng tôi sẽ tạo một nút chuyển đổi cho phép người dùng chuyển đổi giữa các chủ đề

Mở thư mục

  
  

    
Heading text
    
Paragraph text
  

7 mà bạn đã tạo trước đó. Bên trong thư mục, tạo một thư mục khác cho dự án thứ hai của bạn và đặt tên là

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

8. Hoặc, bạn có thể sử dụng lệnh này

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

0

Tiếp theo, di chuyển vào thư mục theo chủ đề

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

1

Tạo ba tệp mới

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

2

Phần này liên quan đến một chút JavaScript. Trước tiên, hãy mở

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

9 của bạn và dán phần đánh dấu sau

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

3

Đoạn mã này đại diện cho một trang blog đơn giản có tiêu đề, nút chuyển đổi chủ đề, bài viết giả và liên kết đến cả tệp CSS và JavaScript tương ứng

Bây giờ, hãy mở tệp

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

0 và dán đoạn mã sau vào

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

4

Đoạn trích này có thể được chia thành hai phần chính. phần bố cục và phần thuộc tính tùy chỉnh. Cái sau là những gì bạn nên tập trung vào. Như bạn có thể thấy, các biến được áp dụng ở trên trong các phần tử liên kết, đoạn văn, tiêu đề và bài viết

Ý tưởng đằng sau cách tiếp cận này là theo mặc định, trang web sử dụng chủ đề sáng và khi hộp được chọn, các giá trị cho chủ đề sáng sẽ được đảo ngược thành một biến thể tối

Vì bạn không thể kích hoạt các thay đổi trên toàn trang web này thông qua CSS, nên JavaScript rất quan trọng ở đây. Trong phần tiếp theo, chúng ta sẽ kết nối mã JavaScript cần thiết để chuyển đổi giữa các chủ đề sáng và tối

Ngoài ra, bạn có thể tự động kích hoạt thay đổi thông qua CSS bằng cách sử dụng truy vấn phương tiện

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

1 để phát hiện xem người dùng đã yêu cầu chủ đề sáng hay tối. Nói cách khác, bạn có thể trực tiếp cập nhật trang web để sử dụng các biến thể tối của chủ đề sáng

Thêm đoạn mã sau vào tất cả mã CSS bạn vừa viết

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

5

Chúng tôi đang lắng nghe cài đặt thiết bị của người dùng và điều chỉnh chủ đề thành màu tối nếu họ đang sử dụng chủ đề tối

Cập nhật tệp

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

2 bằng cách thêm đoạn mã này

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

6

Bây giờ hãy chia nhỏ trạng thái hiện tại của trang web

Một người dùng truy cập trang. Truy vấn phương tiện

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

1 xác định xem người dùng đang sử dụng chủ đề sáng hay tối. Nếu đó là chủ đề tối, thì trang web sẽ cập nhật để sử dụng các biến thể tối của thuộc tính tùy chỉnh. Giả sử một người dùng không sử dụng giao diện tối hoặc hệ điều hành của họ không hỗ trợ giao diện tối. Trình duyệt sẽ mặc định là chủ đề sáng, cho phép người dùng kiểm soát hành vi đó bằng cách chọn hoặc bỏ chọn hộp

Tùy thuộc vào việc hộp được chọn hay bỏ chọn, hàm

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

4 được gọi để chuyển vào biến thể chủ đề và lưu lựa chọn hiện tại của người dùng vào bộ nhớ cục bộ. Bạn sẽ thấy lý do tại sao nó được lưu trong một phút

Hàm

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

4 là nơi tất cả điều kỳ diệu xảy ra. Dựa trên biến thể chủ đề đã thông qua, việc tra cứu được thực hiện trên hằng số

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

6 và được sử dụng để chuyển đổi giữa chế độ sáng và tối

Phần cuối cùng của câu đố là duy trì chủ đề hiện tại, điều này đạt được bằng cách đọc chủ đề ưa thích cuối cùng từ bộ nhớ cục bộ và tự động đặt chủ đề đó khi người dùng truy cập lại trang web

Bạn có thể nghĩ ra hàng triệu cách khác để đạt được điều này. Vui lòng xem qua mã và thực hiện nhiều thay đổi nếu bạn thấy phù hợp

Đây là dự án thứ hai của bạn sẽ trông như thế nào

Phần kết luận

Bằng cách xây dựng các dự án đơn giản này, bạn có thể học cách sử dụng các biến CSS như một chuyên gia. Chắc chắn có nhiều điều về chúng hơn tôi đã giải thích, vì vậy hãy thoải mái loay hoay với mã để khám phá thêm

Các biến CSS giúp đơn giản hóa cách bạn xây dựng trang web và hoạt ảnh phức tạp trong khi vẫn cho phép bạn viết mã có thể tái sử dụng và thanh lịch. Để tìm hiểu thêm, hãy tham khảo tài liệu về MDN

Giao diện người dùng của bạn có ngốn CPU của người dùng không?

Khi giao diện người dùng web ngày càng phức tạp, các tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất cả người dùng của bạn trong sản xuất, hãy thử LogRocket. https. // tên lửa. com/đăng ký/

LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các chỉ số hiệu suất chính của giao diện người dùng, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, ghi nhật ký yêu cầu mạng và tự động hiển thị tất cả các lỗi

CSS có biến không?

Các biến CSS có được kế thừa không?

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

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