CSS Biến: Mở Rộng Kỹ Năng CSS của Bạn

Xin chào các bạn nhà phát triển web đang trên đà trở thành chuyên gia! Hôm nay, chúng ta sẽ cùng nhau khám phá thế giới đầy thú vị của CSS Variables. Là người giáo viên máy tính gần gũi của bạn, tôi rất vui mừng được dẫn dắt các bạn trong hành trình này. Tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ sử dụng CSS Variables như một chuyên gia!

CSS Variables Là Gì?

CSS Variables, còn được gọi là CSS Custom Properties, là các thực thể cho phép bạn lưu trữ các giá trị cụ thể để sử dụng lại trong suốt stylesheet của bạn. Hãy tưởng tượng chúng như những bình chứa giữ các màu sắc yêu thích, kích thước, hoặc bất kỳ giá trị CSS nào bạn thường xuyên sử dụng.

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

:root {
--main-color: #3498db;
}

.button {
background-color: var(--main-color);
}

Trong đoạn mã này, chúng ta đã định nghĩa một biến --main-color và sử dụng nó để thiết lập màu nền của một nút. Đúng là rất tuyệt vời, phải không?

Cách Tiêu Chuẩn để Sử Dụng CSS Variables

Cách tiêu chuẩn để khai báo CSS Variables là sử dụng hai dấu gạch ngang (--) tiếp theo là tên biến. Dưới đây là cách nó hoạt động:

.container {
--padding: 20px;
--font-size: 16px;
}

.box {
padding: var(--padding);
font-size: var(--font-size);
}

Trong ví dụ này, chúng ta đã định nghĩa hai biến, --padding và --font-size, trong lớp .container. Sau đó, chúng ta sử dụng các biến này trong lớp .box. Cách tiếp cận này cho phép dễ dàng cập nhật - chỉ cần thay đổi giá trị của biến một lần, và nó sẽ được cập nhật ở mọi nơi!

CSS Variables - Pseudo-class :root

Pseudo-class :root giống như siêu anh hùng của CSS - nó đại diện cho phần cha ở cấp độ cao nhất trong cây DOM. Khi chúng ta khai báo các biến ở đây, chúng sẽ trở thành biến toàn cục. Hãy cùng xem nó hoạt động như thế nào:

:root {
--primary-color: #e74c3c;
--secondary-color: #2ecc71;
}

.header {
background-color: var(--primary-color);
}

.footer {
color: var(--secondary-color);
}

Bằng cách xác định các biến màu trong :root, chúng ta có thể sử dụng chúng ở bất kỳ đâu trong stylesheet. Đó như thể bạn có một bảng màu ngay tại fingertips của mình!

CSS Variables - Kế Thừa Của Các Tính Năng Tùy Chỉnh

Một trong những tính năng thú vị nhất của CSS Variables là chúng kế thừa giá trị từ các phần tử cha. Đó như một cây gia đình của các phong cách! Hãy kiểm tra điều này:

.parent {
--font-size: 18px;
}

.child {
font-size: var(--font-size);
}

.grandchild {
/* Đây cũng sẽ là 18px */
font-size: var(--font-size);
}

Trong ví dụ này, cả .child và .grandchild kế thừa giá trị --font-size từ .parent. Đó là một cách tuyệt vời để duy trì sự nhất quán trong thiết kế của bạn.

CSS Variables - Giá Trị Fallback

Đôi khi, mọi thứ không diễn ra như kế hoạch. Nhưng đừng lo lắng! CSS Variables có thể hỗ trợ bạn với giá trị fallback. Dưới đây là cách nó hoạt động:

.button {
/* Nếu --button-color không được xác định, nó sẽ sử dụng màu xanh lam */
background-color: var(--button-color, blue);
}

Đây như thể bạn có một kế hoạch dự phòng. Nếu --button-color không được xác định, nút của bạn sẽ có màu xanh lam. Luôn tốt hơn khi có một mạng an toàn!

CSS Variables - Xử Lý Các Tính Năng Tùy Chỉnh Không Hợp Lệ

Vậy điều gì sẽ xảy ra khi một biến CSS không hợp lệ? Hãy cùng tìm hiểu:

:root {
--text-color: 123;
}

.text {
/* Điều này sẽ không hoạt động như mong đợi */
color: var(--text-color);

/* Điều này sẽ sử dụng giá trị fallback đen */
color: var(--text-color, black);
}

Trong trường hợp đầu tiên, trình duyệt sẽ bỏ qua giá trị không hợp lệ và sử dụng giá trị kế thừa hoặc giá trị mặc định cho color. Trong trường hợp thứ hai, nó sẽ sử dụng giá trị fallback black. Luôn kiểm tra các biến của bạn để tránh kết quả không mong muốn!

CSS Variables - Giá Trị Trong JavaScript

Sự kỳ diệu thực sự xảy ra khi chúng ta kết hợp CSS Variables với JavaScript. Đó như thể bạn đã赋予 superpowers cho phong cách của mình! Dưới đây là một chút trải nghiệm:

// Lấy phần tử root
const root = document.documentElement;

// Đặt một biến
root.style.setProperty('--main-color', '#9b59b6');

// Lấy một biến
const mainColor = getComputedStyle(root).getPropertyValue('--main-color');

console.log(mainColor); // Xuất: #9b59b6

Điều này cho phép bạn thay đổi phong cách của bạn một cách linh hoạt dựa trên tương tác của người dùng, thời gian trong ngày, hoặc bất kỳ yếu tố nào bạn có thể nghĩ đến!

Kết Luận

CSS Variables là một bước đột phá trong phát triển web. Chúng mang lại sự linh hoạt, khả năng bảo trì và sự sống động cho stylesheet của bạn. Nhớ rằng, thực hành làm nên完美, vì vậy đừng ngần ngại thử nghiệm các khái niệm này trong dự án của bạn.

Dưới đây là bảng tóm tắt các phương pháp chúng ta đã covered:

Phương Pháp	Mô Tả
Khai Báo	--variable-name: value;
Sử Dụng	property: var(--variable-name);
Phạm Vi Toàn Cục	Sử dụng :root pseudo-class
Kế Thừa	Biến kế thừa từ phần tử cha
Fallback	var(--variable-name, fallback-value)
JavaScript Đặt	element.style.setProperty('--var-name', value)
JavaScript Lấy	getComputedStyle(element).getPropertyValue('--var-name')

Chúc các bạn may mắn trong việc lập trình, các nhà mã hóa CSS tương lai! Nhớ rằng, mỗi chuyên gia đều từng là người mới bắt đầu. Hãy tiếp tục thực hành, 保持好奇心, và quan trọng nhất, hãy vui vẻ với mã của bạn!

Credits: Image by storyset