Các biến CSS có tốt không?

Trong bài đăng này, tôi sẽ nhấn mạnh một vài điều kỳ quặc xung quanh các biến CSS mà không ai nói đến. Sau đó, bạn sẽ không nhìn họ như trước nữa

---

Mục lục

---

1) Hãy cẩn thận với p{ --color:red!important; --color:blue; color:var(--color); } 0

Sử dụng

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

0 với các biến CSS hơi phức tạp, vì vậy hãy bắt đầu với một ví dụ cơ bản

p {
  --color:red!important;

  color:var(--color);
  color:blue;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Màu của

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

4 sẽ là gì?

p {
  color:red!important;
  color:blue;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhưng nó không phải. màu của

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

4 sẽ là màu xanh vì chúng ta sẽ có những thứ sau

p {
  color:red;
  color:blue;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

0 trong trường hợp này không phải là một phần của giá trị của màu nhưng được sử dụng để tăng tính đặc hiệu của

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

8. Từ

Ghi chú. Thuộc tính tùy chỉnh có thể chứa dấu. quan trọng nhưng điều này sẽ tự động bị trình phân tích cú pháp CSS xóa khỏi giá trị của thuộc tính và làm cho thuộc tính tùy chỉnh trở nên "quan trọng" trong tầng CSS. Nói cách khác, lệnh cấm cấp cao nhất ". " nhân vật không ngăn cản. quan trọng từ việc được sử dụng, như. quan trọng được loại bỏ trước khi kiểm tra cú pháp xảy ra

Đây là một ví dụ khác để hiểu rõ hơn

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ở trên sẽ cho chúng ta một màu

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

5

1. Chúng tôi có hai khai báo về cùng một thuộc tính được gọi là

   p{
     --color:red!important;
     --color:blue; 
   
     color:var(--color);
   }
   

   8 vì vậy chúng tôi cần giải quyết tầng. Cái đầu tiên đang có

   p{
     --color:red!important;
     --color:blue; 
   
     color:var(--color);
   }
   

   0 nên nó thắng
2. Chúng tôi có người chiến thắng (

   p{
     --color:red!important;
     --color:blue; 
   
     color:var(--color);
     color:blue;
   }
   

   2) vì vậy

   p{
     --color:red!important;
     --color:blue; 
   
     color:var(--color);
   }
   

   0 bị xóa sau đó giá trị được áp dụng cho

   p{
     --color:red!important;
     --color:blue; 
   
     color:var(--color);
     color:blue;
   }
   

   4
3. Chúng tôi có

   p{
     --color:red!important;
     --color:blue; 
   
     color:var(--color);
     color:blue;
   }
   

   5

Hãy tạo mã của chúng tôi

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
  color:blue;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Theo logic tương tự, chúng tôi giải quyết tầng cho

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

8 và cho

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
  color:blue;
}

4.

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
  color:blue;
}

2 là người chiến thắng và tương tự cho

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
  color:blue;
}

9, vì vậy cuối cùng chúng tôi có

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
} 

0 vì chúng tôi không còn quan tâm đến

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
} 

1

Một quy tắc quan trọng là luôn coi các biến CSS (thuộc tính tùy chỉnh) là thuộc tính thông thường chứ không chỉ các biến lưu trữ giá trị

Thuộc tính tùy chỉnh là thuộc tính thông thường, vì vậy chúng có thể được khai báo trên bất kỳ phần tử nào, được giải quyết bằng quy tắc kế thừa và tầng thông thường, có thể được tạo điều kiện bằng @media và các quy tắc có điều kiện khác, có thể được sử dụng trong thuộc tính kiểu của HTML, có thể được đọc hoặc đặt .

---

2) Họ không thể lưu trữ URL

Đây là một hạn chế phổ biến mà bạn sẽ vấp phải vào một ngày nào đó

Điều bạn không thể làm❌

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
} 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn nên làm gì ✔️

:root {
  --url:url("https://picsum.photos/id/1/200/300");
}
.box {
  background:var(--url);
} 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Giới hạn này liên quan đến cách phân tích cú pháp của

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
} 

2. Một chút khó khăn để giải thích nhưng như chúng ta có thể thấy cách khắc phục khá dễ dàng. Luôn thêm phần

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
} 

2 trong biến CSS

Nếu bạn muốn biết chi tiết chính xác hơn, tôi khuyên bạn nên đọc câu trả lời Stack Overflow này

---

3) Họ có thể biến một giá trị không hợp lệ thành hợp lệ

Đây là trò đùa yêu thích của tôi và nó sẽ khiến bạn đau đầu

Hãy bắt đầu với một ví dụ cơ bản

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
} 

4 của chúng ta sẽ có màu chuyển sắc. đợi đã, không, nó có bối cảnh

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

5. Ah. Tôi đã đánh máy sai ở

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
} 

6. Tôi có thể dễ dàng nhận thấy lỗi của mình vì trình duyệt đã bỏ qua phần khai báo và sử dụng phần khai báo trước đó

Bây giờ, hãy giới thiệu một biến

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Kiểm tra mã và bạn sẽ thấy rằng nền hiện trong suốt và phần khai báo thứ hai của chúng ta không còn bị gạch chéo nữa vì giờ đây nó là một phần hợp lệ. Bạn thậm chí sẽ nhận thấy rằng khai báo đầu tiên là khai báo bị gạch chéo vì khai báo thứ hai sẽ ghi đè lên nó

Cái quái gì đang xảy ra thế này??

Khi sử dụng một biến trong một thuộc tính, trình duyệt sẽ chỉ đánh giá giá trị của thuộc tính đó tại "thời điểm giá trị được tính toán" vì trước tiên chúng ta cần biết nội dung của biến. Trong những trường hợp như vậy, trình duyệt sẽ coi giá trị là hợp lệ khi thực hiện xếp tầng và chỉ sau đó nó sẽ trở nên không hợp lệ

Trong trường hợp của chúng tôi, trình duyệt đang xem xét khai báo cuối cùng sau khi giải quyết tầng. Sau đó khi thực hiện đánh giá, nó dường như không hợp lệ nên nó sẽ bị bỏ qua. Chúng tôi sẽ không quay lại tuyên bố trước đó vì chúng tôi đã giải quyết tầng và chúng tôi kết thúc mà không có nền nên một nền trong suốt

Bạn có thể nghĩ hành vi như vậy là phi logic nhưng nó thực sự logic vì một giá trị có thể hợp lệ hoặc không hợp lệ dựa trên biến CSS nên trình duyệt không thể biết ngay từ đầu

.box {
  --color:10px; /* a "valid" variable */
  background: red; /* a "valid" declaration */
  background:linear-gradient(var(--color),blue); /* a "valid" declaration that will override the first one  */
  /* The result is an "invalid" value .. */ 
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nếu một thuộc tính chứa một hoặc nhiều hàm var() và các hàm đó hợp lệ về mặt cú pháp, thì toàn bộ ngữ pháp của thuộc tính đó phải được coi là hợp lệ tại thời điểm phân tích cú pháp. Nó chỉ được kiểm tra cú pháp tại thời điểm giá trị được tính toán, sau khi các hàm var() đã được thay thế.

và

Một khai báo có thể không hợp lệ tại thời điểm giá trị được tính nếu nó chứa một var() tham chiếu một thuộc tính tùy chỉnh với giá trị ban đầu của nó, như đã giải thích ở trên hoặc nếu nó sử dụng một thuộc tính tùy chỉnh hợp lệ, nhưng giá trị thuộc tính, sau khi thay thế var( . Khi điều này xảy ra, giá trị tính toán của thuộc tính là giá trị kế thừa của thuộc tính hoặc giá trị ban đầu của thuộc tính tùy thuộc vào việc thuộc tính có được kế thừa hay không, tương ứng, như thể giá trị của thuộc tính đã được chỉ định là từ khóa chưa đặt.

Để sử dụng các từ dễ dàng. một biến CSS sẽ đặt trạng thái của một thuộc tính ở chế độ chờ cho đến khi chúng tôi thực hiện đánh giá. Chỉ sau khi đánh giá, chúng tôi mới có thể nói nó hợp lệ hay không hợp lệ. Nếu nó không hợp lệ thì đã quá muộn, chúng tôi không thể quay lại sử dụng cái khác

Một câu hỏi về Stack Overflow có liên quan

---

4) Chúng có thể được sử dụng đơn vị

Hầu như tất cả các hướng dẫn/khóa học sẽ chỉ cho bạn ví dụ như vậy

p {
  color:red!important;
  color:blue;
}

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhưng bạn cũng có thể làm như sau

p {
  color:red!important;
  color:blue;
}

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Việc có đơn vị trong biến là không bắt buộc và trong một số trường hợp, sử dụng giá trị không có đơn vị thậm chí còn tốt hơn vì việc thêm đơn vị khá dễ dàng và chúng tôi có thể cần sử dụng cùng một giá trị với một đơn vị khác

Đây là một ví dụ trong số nhiều ví dụ (lấy từ câu trả lời này )

Đừng bao giờ quên tính năng quan trọng này. Nó sẽ giúp bạn tiết kiệm một ngày

---

5) Chúng có thể hoạt hình

Ban đầu, các biến CSS được định nghĩa là các thuộc tính không thể hoạt hình theo

hoạt hình. không

Nhưng mọi thứ đã thay đổi và nhờ cái mới, chúng ta có thể thực hiện hoạt ảnh/chuyển tiếp với các biến CSS

Hỗ trợ vẫn còn thấp (đặc biệt là trên Firefox) nhưng đã đến lúc tìm hiểu điều này

Tìm bên dưới một số trường hợp sử dụng mà tôi đang dựa vào tính năng đó

Cuối cùng chúng ta cũng có thể tạo hiệu ứng chuyển màu CSS

Temani Afif ・ 26 Feb '21 ・ 2 phút đọc

#css #webdev #tutorial

Hiệu ứng phân mảnh chỉ CSS bằng một phần tử

Temani Afif ・ 23 Mar '21 ・ 6 phút đọc

#css #webdev #tutorial

Tôi sẽ viết nhiều bài báo hơn để cho thấy điều kỳ diệu mà chúng ta có thể làm với điều này. Giữ nguyên

---

6) Họ không thể lưu trữ giá trị p{ --color:red!important; --color:blue; color:var(--color); } 1

Hãy xem xét ví dụ sau

p {
  color:red!important;
  color:blue;
}

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

p {
  color:red!important;
  color:blue;
}

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Theo trực giác, chúng ta có thể nghĩ rằng

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
} 

9 sẽ kế thừa cùng một đường viền của phần tử cha vì

:root {
  --url:url("https://picsum.photos/id/1/200/300");
}
.box {
  background:var(--url);
} 

0 chứa

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

1 nhưng nó sẽ không (bạn có thể thử xem)

Như tôi đã giải thích ở phần (1), sai lầm phổ biến là nghĩ rằng các biến CSS sẽ chỉ lưu trữ một giá trị mà chúng ta có thể sử dụng sau này nhưng không phải vậy. Biến CSS (thuộc tính tùy chỉnh) là thuộc tính thông thường nên

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

1 áp dụng cho chúng và không được lưu trữ bên trong chúng

Thí dụ

p {
  color:red!important;
  color:blue;
}

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Như bạn có thể thấy, logic kế thừa áp dụng cho chúng giống như với các thuộc tính chung

Đáng lưu ý rằng làm như trên là vô ích vì các biến CSS theo mặc định được kế thừa. Nó giống như việc đặt

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

1 thành tài sản được thừa kế theo mặc định (ví dụ: ____14_______4)

Điều này nói rằng tôi đã xây dựng một kỹ thuật để có thể sử dụng các biến CSS với

p{
  --color:red!important;
  --color:blue; 

  color:var(--color);
}

1

Làm cách nào để lưu trữ giá trị kế thừa bên trong biến CSS (còn gọi là thuộc tính tùy chỉnh)?

10 tháng 11 '18 Nhận xét. Câu trả lời. 1

6

Hãy xem xét ví dụ đơn giản này để minh họa vấn đề

p {
  color:red!important;
  color:blue;
}

5_______5_______6…

p {
  color:red!important;
  color:blue;
}

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Mở câu hỏi đầy đủ

Logic tương tự áp dụng cho các từ khóa khác như

:root {
  --url:url("https://picsum.photos/id/1/200/300");
}
.box {
  background:var(--url);
} 

6 và

:root {
  --url:url("https://picsum.photos/id/1/200/300");
}
.box {
  background:var(--url);
} 

7. Cách đặt biến CSS thành giá trị không được đặt, “--unset-it. bỏ đặt”?

---

7) Chúng có thể trống

Có, bạn có thể làm như sau

p {
  color:red!important;
  color:blue;
}

8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trên đây là hợp lệ theo

Ghi chú. Mặc dù

:root {
  --url:url("https://picsum.photos/id/1/200/300");
}
.box {
  background:var(--url);
} 

8 phải đại diện cho ít nhất một mã thông báo, nhưng mã thông báo đó có thể là khoảng trắng. Điều này ngụ ý rằng

:root {
  --url:url("https://picsum.photos/id/1/200/300");
}
.box {
  background:var(--url);
} 

9 là hợp lệ và lệnh gọi

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

0 tương ứng sẽ có một khoảng trắng làm giá trị thay thế của nó, nhưng

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

1 không hợp lệ

Hãy chú ý đến câu cuối cùng vì chúng ta cần có ít nhất một dấu cách. Dưới đây là không hợp lệ

p {
  color:red!important;
  color:blue;
}

9

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Quirk này chủ yếu được sử dụng với tính năng dự phòng để thực hiện một số phép thuật

Một ví dụ cơ bản để hiểu thủ thuật

p {
  color:red;
  color:blue;
}

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

p {
  color:red;
  color:blue;
}

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

1. Hộp đầu tiên không có biến được xác định nên dự phòng sẽ được sử dụng
2. Cái thứ hai có một biến được xác định nên nó sẽ được sử dụng
3. Cái cuối cùng đã xác định một biến rỗng để sự trống rỗng sẽ được sử dụng. Nó giống như chúng ta không còn có

   .box {
     background: red;
     background: linaer-gradient(red, blue);
   }
   

   2

Giá trị trống cho phép chúng tôi xóa khai báo

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

3 khỏi thuộc tính. Điều này có thể hữu ích khi sử dụng

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

3 trong một giá trị phức tạp

Trong trường hợp

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

3 được sử dụng một mình, logic tương tự cũng được áp dụng nhưng cuối cùng chúng ta sẽ có một giá trị trống không hợp lệ đối với hầu hết các thuộc tính

Nếu chúng ta lấy ví dụ đầu tiên, chúng ta sẽ có

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

6, điều này sẽ dẫn đến một giá trị không hợp lệ tại "thời điểm giá trị được tính toán" (hãy nhớ (3)) vì vậy nền trong suốt

---

8) Biến CSS không phải là biến C++

Thật không may, nhiều nhà phát triển có xu hướng so sánh các biến CSS với các biến của các ngôn ngữ khác và cuối cùng gặp nhiều vấn đề trong logic của họ. Vì lý do cụ thể này, tôi không muốn gọi chúng là biến mà là Thuộc tính tùy chỉnh vì chúng là thuộc tính

Mọi người muốn làm gì

p {
  color:red;
  color:blue;
}

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

p {
  color:red;
  color:blue;
}

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

p {
  color:red;
  color:blue;
}

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tất cả những điều trên sẽ không bao giờ hiệu quả. Hai cái đầu tiên đơn giản là không hợp lệ vì chúng ta có một biến vì một biến đang tham chiếu đến chính nó (ví dụ đầu tiên) hoặc một nhóm biến (ví dụ thứ hai) và đang tạo ra một chu trình

Trong ví dụ cuối cùng, cả

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

7 và

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

8 sẽ có

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

9 vì tầng sẽ ưu tiên cho khai báo cuối cùng

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

0 sẽ được áp dụng cho cả

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

8 và

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

7

Điều này nói rằng bạn nên ngừng suy nghĩ về C++, JavaScript, Java, v.v. khi làm việc với các biến CSS vì chúng là các thuộc tính tùy chỉnh có logic của chúng

---

9) Họ chỉ làm việc từ cha mẹ đến con cái

Hãy nhớ nguyên tắc vàng này. Các biến CSS luôn di chuyển từ phần tử cha (hoặc tổ tiên) sang phần tử con. Họ không bao giờ đi từ con sang cha mẹ hoặc giữa các yếu tố anh chị em

Điều này sẽ dẫn chúng ta đến sai lầm sau

p {
  color:red;
  color:blue;
}

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn có nghĩ rằng bối cảnh của

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
} 

4 sẽ là

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

4 không?

Phần tử gốc là phần tử cao nhất trong DOM, vì vậy nó là tổ tiên của phần tử

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

6 của chúng tôi và quy tắc vàng của chúng tôi nói rằng chúng tôi chỉ có thể thực hiện cha mẹ -> con nên

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

7 không thể đi theo hướng ngược lại để đến phần tử gốc, hãy thay đổi

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

8 và

Trong một ví dụ như vậy,

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
} 

4 sẽ kế thừa giá trị của

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

8 được xác định bằng các giá trị của

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

7 và

.box {
  --color:10px; /* a "valid" variable */
  background: red; /* a "valid" declaration */
  background:linear-gradient(var(--color),blue); /* a "valid" declaration that will override the first one  */
  /* The result is an "invalid" value .. */ 
}

3 bên trong

.box {
  --color:10px; /* a "valid" variable */
  background: red; /* a "valid" declaration */
  background:linear-gradient(var(--color),blue); /* a "valid" declaration that will override the first one  */
  /* The result is an "invalid" value .. */ 
}

4. Thay đổi

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

7 sẽ chỉ thay đổi giá trị của

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

7 bên trong

:root {
  --url:"https://picsum.photos/id/1/200/300";
}
.box {
  background:url(var(--url));
} 

4, không có gì khác

Tìm bên dưới một câu trả lời chi tiết hơn tôi đã viết về chủ đề này

Thuộc tính tùy chỉnh trong phạm vi CSS bị bỏ qua khi được sử dụng để tính biến trong phạm vi bên ngoài

25 tháng tám '18 Nhận xét. 2 Câu trả lời. 1

19

Tôi đang cố gắng mở rộng quy mô thông qua thuộc tính tùy chỉnh

.box {
  --color:10px; /* a "valid" variable */
  background: red; /* a "valid" declaration */
  background:linear-gradient(var(--color),blue); /* a "valid" declaration that will override the first one  */
  /* The result is an "invalid" value .. */ 
}

8 theo cách mà các lớp sẽ kết hợp mà không được ghép nối. Hiệu quả mong muốn là 3 danh sách sẽ ở 3 tỷ lệ khác nhau nhưng như được minh họa trên CodePen, cả 3 danh sách đều có cùng tỷ lệ. Tôi đang tìm kiếm…

Mở câu hỏi đầy đủ

Ngay cả nhóm Stack Overflow cũng vấp phải điều kỳ quặc này

---

10) Chúng có thể có cú pháp lạ

Một điều kỳ quặc cuối cùng và hài hước

Bạn có biết rằng bạn có thể làm những điều sau đây?

p {
  color:red;
  color:blue;
}

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tuyệt vời, phải không? . Có liên quan. "-" có phải là mã định danh CSS3 hợp lệ không?

Bạn nghĩ điều trên là điên rồ, hãy xem điều sau

p {
  color:red;
  color:blue;
}

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Vâng, biểu tượng cảm xúc. bạn có thể xác định các biến của mình bằng biểu tượng cảm xúc và nó hoạt động

Cú pháp của các biến CSS cho phép hầu hết mọi thứ, yêu cầu duy nhất là bắt đầu bằng

.box {
  --color:10px; /* a "valid" variable */
  background: red; /* a "valid" declaration */
  background:linear-gradient(var(--color),blue); /* a "valid" declaration that will override the first one  */
  /* The result is an "invalid" value .. */ 
}

9. Bạn cũng có thể bắt đầu bằng một số (ví dụ:.

p {
  color:red!important;
  color:blue;
}

00). Có liên quan. Tên biến CSS có thể bắt đầu bằng một số không?

Tại sao không chỉ có dấu gạch ngang

p {
  color:red;
  color:blue;
}

8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hoặc cùng một biến lưu trữ hai giá trị khác nhau

p {
  color:red;
  color:blue;
}

9

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hãy thử cách trên và bạn sẽ nhận được một màu gradient

Để đạt được điều kỳ diệu như vậy, tôi đang dựa vào một nhân vật ẩn làm cho cả hai biến khác nhau nhưng về mặt trực quan, chúng ta thấy chúng giống nhau. Nếu bạn thử mã trên jsfiddle. net Bạn sẽ thấy như sau

Tất nhiên, bạn không bao giờ nên sử dụng một thứ như vậy trong một dự án thực tế, trừ khi bạn muốn khiến sếp và đồng nghiệp của mình phát điên 😜

---

Đó là nó

Tôi biết có rất nhiều thông tin cùng một lúc nhưng bạn không cần phải nhớ mọi thứ. Tôi đã cố gắng nhóm các hành vi không rõ ràng và không trực quan nhất xung quanh các biến CSS. Nếu một ngày nào đó có gì đó không hoạt động như mong đợi, hãy quay lại đây. Bạn có thể sẽ tìm thấy câu trả lời của bạn ở trên

Sử dụng biến trong CSS có tốt không?

Tại sao không sử dụng các biến CSS?

Tôi nên sử dụng biến CSS hay sass?

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