10.1 Khai báo biến
Biến trong CSS, còn được gọi là thuộc tính tùy chỉnh (CSS Custom Properties), cho phép lập trình viên lưu giá trị thuộc tính ở một nơi và tái sử dụng chúng trong tài liệu. Điều này làm cho CSS linh hoạt và dễ quản lý hơn, đặc biệt khi làm việc với các dự án lớn.
Khai báo biến
Biến trong CSS được khai báo bằng cách sử dụng hai dấu gạch ngang (--) trước tên biến.
Thông thường chúng được khai báo trong selector :root để có thể truy cập được trong toàn bộ tài liệu.
Cú pháp:
:root {
--ten-bien: gia-tri;
--ten-bien: gia-tri;
}
Ví dụ:
Trong ví dụ này có ba biến được khai báo: --main-color, --secondary-color, và --font-size.
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 Sử dụng biến
Để sử dụng biến, ta dùng hàm var(), hàm này nhận tên biến làm tham số.
Cú pháp:
selector {
thuoc-tinh: var(--ten-bien);
thuoc-tinh: var(--ten-bien);
}
Ví dụ:
Ví dụ này sử dụng các biến đã khai báo trước để tạo kiểu cho nền, màu chữ và kích thước phông chữ của phần tử <body>.
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 Thừa kế và ghi đè biến
Biến CSS được thừa kế theo thứ tự phân cấp của các phần tử. Điều này có nghĩa là nếu một biến được khai báo trong một phần tử, nó sẽ có sẵn cho các phần tử con của nó. Biến cũng có thể được ghi đè trong các selector khác.
Ví dụ:
Trong ví dụ này, phần tử .header ghi đè biến --main-color, và biến mới này
chỉ áp dụng cho nó. Trong khi đó, phần tử .footer sử dụng giá trị biến
được khai báo trong :root.
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 Lợi ích của việc sử dụng biến CSS
1. Đơn giản hóa quản lý style:
Biến cho phép thay đổi giá trị của một thuộc tính tại một nơi, và sự thay đổi này sẽ tự động áp dụng cho tất cả các nơi mà biến đó được sử dụng. Điều này đặc biệt hữu ích cho việc tạo chủ đề và duy trì sự nhất quán trong style.
2. Cải thiện khả năng đọc và bảo trì mã:
Sử dụng biến làm cho mã CSS dễ đọc và dễ hiểu hơn, vì chúng có thể được sử dụng để mô tả các giá trị
như màu sắc và kích thước, có thể mang ý nghĩa ngữ nghĩa
(ví dụ: --main-color thay cho #3498db).
3. Cập nhật style động:
Biến có thể được thay đổi động bằng cách sử dụng JavaScript, điều này cho phép tạo ra các giao diện người dùng tương tác và động hơn.
GO TO FULL VERSION