Bạn có thể có nhiều CSS gốc không?

Biến đơn trong tài liệu

Hãy để chúng tôi lấy một ví dụ cơ bản nơi chúng tôi sẽ sử dụng một biến duy nhất chứa thuộc tính tùy chỉnh và chúng tôi sẽ sử dụng cùng một biến ở mọi nơi

Ví dụ về Thuộc tính đơn của biến CSS

:root {
 --val-font-color: crimson;  
 }
 
ul {
 font-size:25px;
 color:var[--val-font-color];
}

Chạy mã

Nhiều biến trong tài liệu

Không có giới hạn về số lượng biến trong tài liệu. Bạn có thể xác định 1 biến hoặc nhiều biến tùy theo nhu cầu và yêu cầu của bạn

Ví dụ về nhiều biến

:root {
 --val-font-size: 25px;
 --val-font-color: crimson;
 --val-bg-color:black;
 --val-margin:15px;
 --val-padding:10px;
 --val-border:2px solid crimson;
}
 
ul {
 font-size:var[--val-font-size];
 color:var[--val-font-color];
 background:var[--val-bg-color];
 margin:var[--val-margin];
 padding:var[--val-padding];
 border:var[--val-border];
}

Chạy mã

Dự phòng biến CSS

Tốt nhất, bạn nên luôn xác định giá trị dự phòng

Xem xét một số tình huống như -

• Bạn đang sử dụng một biến làm đối số của hàm var[] nhưng bạn không xác định nó
• Một tình huống khác là – bạn viết sai chính tả tên biến trong đối số

Trong cả hai trường hợp này, bạn sẽ gặp sự cố vì biến sẽ không lưu trữ bất kỳ thuộc tính tùy chỉnh nào nên cách khắc phục sự cố này là giá trị dự phòng. Giá trị dự phòng này sẽ chỉ được áp dụng khi trình duyệt không thể quyết định giá trị của biến

Ví dụ về dự phòng biến

:root {
 --val-font-size: 20px;
 --val-font-color: crimson;
 }
 
ul {
 font-size:var[--val-font-size, 30px];
 color:var[--vall-font-color, blue];
}

Chạy mã

Phạm vi của biến

Phạm vi của biến là quan trọng

Nếu bạn muốn sử dụng biến ở bất cứ đâu trong tài liệu, thì hãy xác định nó ở cấp cơ sở

Nếu bạn muốn sử dụng biến ở bất kỳ đâu trong phần thân, thì hãy xác định nó bên dưới nó

:root {
 --border-var: 1px solid black; /* at root level */
}

body {
 --text-color: red; /* to body selector */
}

* {
 --bg-color: gray; /* set to universal selector */
}

html {
 --var-padding: 2px; /* set to the html document */
}

Nếu cùng một tên biến được xác định ở cấp gốc cũng như ở cấp thẻ cụ thể, thì mức độ ưu tiên là gì?

Biến được xác định ở cấp thẻ thấp hơn sẽ có mức độ ưu tiên cao hơn so với cùng tên biến được xác định ở cấp gốc hoặc bộ chọn nội dung hoặc bộ chọn html hoặc bộ chọn phổ

Tương tự, nếu bạn định nghĩa cùng một tên biến bên trong cấp gốc [. root], bộ chọn nội dung[body], bộ chọn chung [*], tài liệu html [html] hoặc ở bất kỳ cấp thẻ/id thấp hơn nào, thì thứ tự ưu tiên như sau –

Gốc có giống với * trong CSS không?

Tại sao lại sử dụng root thay vì HTML?

Tại sao nên sử dụng CSS gốc?

Làm cách nào để ghi đè các biến gốc CSS?