1.1 CSS-variables là gì?
CSS-variables, còn được biết đến như các thuộc tính tùy chỉnh (custom properties), là các biến được khai báo trong CSS, dùng để lưu trữ các giá trị như màu sắc, kích thước, phông chữ và các thuộc tính CSS khác. Chúng cung cấp khả năng cải thiện sự linh hoạt và dễ duy trì cho các phong cách trên trang web.
CSS-variables là gì?
CSS-variables là các biến có thể lưu trữ giá trị của thuộc tính CSS và được sử dụng lại ở những phần khác nhau của mã CSS. Chúng được xác định bằng hai dấu gạch ngang (--) và có thể được đặt ở bất kỳ bộ chọn nào, nhưng thường nhất là trong bộ chọn gốc :root để chúng khả dụng ở mọi nơi trong tài liệu.
Ví dụ:
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
Đặc điểm chính của CSS-variables:
- Tái sử dụng: CSS-variables cho phép bạn xác định một giá trị một lần và sử dụng nó nhiều lần ở các phần khác nhau của mã CSS. Điều này giúp tránh nhân đôi và đơn giản hóa việc quản lý phong cách.
- Tính linh hoạt: giá trị của CSS-variables có thể thay đổi tùy theo điều kiện, chẳng hạn như trạng thái của thành phần hay media-queries. Điều này cho phép tạo ra các phong cách linh hoạt và động hơn.
- Thừa kế: CSS-variables được thừa kế từ các phần tử cha đến con, điều này đơn giản hóa việc quản lý và tổ chức các phong cách.
- Quản lý: Sử dụng các biến giúp dễ dàng hỗ trợ mã, vì các thay đổi giá trị của biến sẽ tự động được áp dụng cho tất cả các phần tử sử dụng các biến đó.
1.2 Ví dụ sử dụng CSS-variables
Ví dụ sử dụng CSS-variables trong JavaScript:
document.documentElement.style.setProperty('--main-color', '#e74c3c');
Ví dụ 1: Xác định và sử dụng biến
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
<body>
<p>Đây là một đoạn văn.</p>
<a href="#">Đây là một liên kết</a>
</body>
Giải thích:
- Trong ví dụ này, ba biến được xác định:
--main-bg-color,--main-text-colorvà--primary-color - Các biến này được sử dụng để đặt màu nền, màu văn bản và màu liên kết
1.3 Thay đổi giá trị biến trong JavaScript
Trong ví dụ này, các biến được sử dụng để đặt chủ đề giao diện của trang. Khi nhấn vào nút, giá trị của các biến sẽ thay đổi, dẫn đến sự thay đổi nền và màu văn bản:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
<button id="toggle-theme">Chuyển đổi chủ đề</button>
<p>Đây là một đoạn văn.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION