Bạn có bao giờ thấy mệt mỏi khi phải cập nhật một mã màu ở hàng chục nơi trong file CSS? Với CSS Variables, cơn ác mộng đó đã kết thúc. Đây không chỉ là một tính năng tiện lợi, mà là một cuộc cách mạng trong cách chúng ta viết và quản lý CSS. Hãy cùng WiWeb tìm hiểu từ A-Z về CSS Custom Properties để biến stylesheet của bạn trở nên linh hoạt, dễ bảo trì và mạnh mẽ hơn bao giờ hết.
CSS Variables là gì?
Nếu bạn từng ước có thể lưu một giá trị màu sắc hoặc kích thước và dùng lại nó ở nhiều nơi, thì chúc mừng, điều ước của bạn đã thành hiện thực. Về mặt kỹ thuật, tính năng này có tên chính thức là CSS Custom Properties for Cascading Variables. Tuy nhiên, cộng đồng lập trình viên thường gọi nó bằng cái tên thân thuộc hơn là CSS Variables (Biến CSS).
Hãy tưởng tượng bạn có một biến chứa mã màu chính của thương hiệu. Thay vì gõ lại #3498db ở 50 chỗ khác nhau, bạn chỉ cần gọi tên biến đó ra. Khi cần đổi màu, bạn chỉ sửa đúng một nơi. Thật tuyệt vời phải không?
Vậy tại sao chúng ta nên sử dụng CSS Variables:
- Code sạch hơn, dễ đọc hơn: Tên biến như
--primary-colordễ hiểu hơn nhiều so với mã hex#3498db. - Dễ dàng bảo trì: Thay đổi giá trị ở một nơi và toàn bộ website của bạn sẽ được cập nhật.
- Tương tác động: Biến CSS có thể được cập nhật trực tiếp bằng JavaScript, mở ra vô vàn khả năng cho hiệu ứng và tương tác người dùng.
- Không cần Preprocessor: Những lợi ích cơ bản của biến mà trước đây chỉ có ở SASS hay LESS giờ đã có sẵn ngay trong CSS.
Lợi ích vượt trội của CSS Variables
Lý thuyết là vậy, nhưng sức mạnh thực sự của CSS Variables chỉ bộc lộ khi bạn áp dụng vào dự án. Đây là những lợi ích thay đổi cuộc chơi mà bạn sẽ nhận được.
Đầu tiên là việc giảm lặp code, tuân thủ nguyên tắc DRY (Don’t Repeat Yourself). Thay vì viết đi viết lại một giá trị, bạn chỉ cần khai báo nó một lần và gọi ra bằng hàm var(). Điều này không chỉ tiết kiệm thời gian gõ phím mà còn giảm thiểu rủi ro sai sót.
Lợi ích thứ hai là khả năng bảo trì và cập nhật dễ như trở bàn tay. Giả sử khách hàng muốn đổi màu chủ đạo từ xanh sang tím. Bạn chỉ cần vào file CSS, tìm đến nơi khai báo biến --primary-color và đổi giá trị. Mọi thứ sẽ tự động cập nhật mà không cần dùng đến tính năng Find & Replace đầy rủi ro.
Một trong những ứng dụng hấp dẫn nhất là xây dựng chủ đề (theming) động. Bạn muốn tạo chức năng chuyển đổi giữa giao diện Sáng (Light Mode) và Tối (Dark Mode)? Với CSS Variables, việc này trở nên cực kỳ đơn giản. Bạn chỉ cần định nghĩa hai bộ biến màu sắc và dùng một class để chuyển đổi giữa chúng. Chúng ta sẽ tìm hiểu kỹ hơn ở ví dụ thực chiến bên dưới.
Cuối cùng, biến CSS còn tăng tính linh hoạt cho Responsive Design. Bạn có thể định nghĩa lại giá trị của một biến bên trong một Media Query. Ví dụ, biến --gutter-width có thể là 24px trên desktop nhưng chỉ còn 16px trên mobile. Cách làm này giúp code responsive của bạn gọn gàng và dễ quản lý hơn rất nhiều.
Cú pháp và Cách sử dụng CSS Variables từ Cơ bản đến Nâng cao
Cú pháp của CSS Variables rất đơn giản và dễ nhớ. Về cơ bản, bạn chỉ cần nắm vững hai khái niệm: khai báo biến và sử dụng biến.
Cách khai báo biến
Để khai báo một biến, bạn sử dụng hai dấu gạch nối (--) ở đầu tên biến, theo sau là tên bạn muốn đặt và giá trị của nó. Tên biến có phân biệt chữ hoa và chữ thường.
/* Khai báo biến trong một selector */
:root {
--primary-color: #007bff;
--main-font-size: 16px;
--default-padding: 1rem;
}
Cách sử dụng biến với hàm var()
Để gọi ra giá trị của một biến, bạn dùng hàm var(). Chỉ cần đặt tên biến (bao gồm cả hai dấu gạch nối) vào bên trong hàm.
body {
font-size: var(--main-font-size);
color: var(--primary-color);
}
.container {
padding: var(--default-padding);
}
Sử dụng giá trị dự phòng
Điều gì xảy ra nếu bạn gọi một biến không tồn tại? Mặc định, thuộc tính đó sẽ bị bỏ qua. Để tránh lỗi này, hàm var() cho phép bạn truyền vào một giá trị dự phòng. Giá trị này sẽ được sử dụng nếu biến đầu tiên không được định nghĩa.
Cú pháp rất đơn giản: var(--ten-bien, gia-tri-du-phong).
.button {
/* Nếu --button-color không tồn tại, màu sẽ là #333 */
background-color: var(--button-color, #333);
}
Cách này cực kỳ hữu ích để đảm bảo giao diện của bạn luôn ổn định, ngay cả khi có lỗi xảy ra với các biến.
Tìm hiểu về Phạm vi (Scope) của Biến trong CSS
Một khái niệm quan trọng khi làm việc với CSS Variables là phạm vi (scope). Phạm vi quyết định một biến có thể được truy cập từ đâu. Có hai loại phạm vi chính: toàn cục và cục bộ.
Biến toàn cục (Global Variables) với :root
Khi bạn muốn một biến có thể sử dụng ở bất kỳ đâu trong trang web, hãy khai báo nó bên trong pseudo-class :root. Selector :root đại diện cho phần tử cấp cao nhất trong cây DOM, chính là thẻ <html>. Bất kỳ biến nào được định nghĩa ở đây đều trở thành biến toàn cục.
:root {
--text-color: #212529;
--background-color: #ffffff;
}
body {
background-color: var(--background-color);
}
p {
color: var(--text-color);
}
Biến cục bộ (Local Variables) trong một selector cụ thể
Đôi khi, bạn chỉ muốn một biến có tác dụng bên trong một thành phần cụ thể. Lúc này, bạn có thể khai báo biến ngay trong selector của thành phần đó. Biến này sẽ là biến cục bộ, chỉ nó và các phần tử con của nó mới có thể sử dụng.
.alert-success {
--alert-bg: #d4edda;
background-color: var(--alert-bg);
}
.alert-danger {
--alert-bg: #f8d7da;
background-color: var(--alert-bg);
}
Tính kế thừa và ghi đè (Cascading)
Đây chính là phần “Cascading” trong tên gọi chính thức. Giống như các thuộc tính CSS khác, biến cũng có tính kế thừa. Một phần tử con có thể sử dụng biến được định nghĩa ở phần tử cha. Quan trọng hơn, bạn có thể ghi đè giá trị của một biến toàn cục ngay tại một scope cục bộ. Đây là nền tảng để tạo ra các theme động như Dark Mode.
Ví dụ Xây dựng Chức năng Dark Mode với CSS Variables
Bây giờ, hãy cùng nhau áp dụng những gì đã học để xây dựng tính năng Dark Mode. Đây là ví dụ kinh điển thể hiện rõ nhất sức mạnh và sự thanh lịch của CSS Variables. Cách làm cực kỳ đơn giản, chỉ gồm 3 bước.
Bước 1: Khai báo bộ màu cho Light Theme và Dark Theme
Đầu tiên, chúng ta khai báo các biến màu mặc định (cho Light Theme) trong :root. Sau đó, chúng ta định nghĩa lại các biến này bên trong một selector, ví dụ body.dark-mode.
:root {
--bg-color: #ffffff;
--text-color: #333333;
--card-bg: #f1f1f1;
}
body.dark-mode {
--bg-color: #1a1a1a;
--text-color: #f1f1f1;
--card-bg: #2b2b2b;
}
Bước 2: Áp dụng biến vào các thành phần trên trang
Tiếp theo, hãy sử dụng các biến này cho các thành phần trên trang web của bạn. Chúng ta không cần quan tâm đến theme hiện tại là gì, chỉ cần gọi đúng tên biến.
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.card {
background-color: var(--card-bg);
}
Bước 3: Kích hoạt Dark Mode bằng một class đơn giản
Bước cuối cùng là phần thú vị nhất. Để chuyển sang Dark Mode, bạn chỉ cần dùng một chút JavaScript để thêm class dark-mode vào thẻ <body>. Khi class này được thêm vào, bộ biến trong body.dark-mode sẽ được kích hoạt và ghi đè lên bộ biến trong :root. Ngay lập tức, toàn bộ giao diện sẽ thay đổi theo.
const themeToggleButton = document.getElementById('theme-toggle');
themeToggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
Bạn thấy không? Chỉ với một class, chúng ta đã thay đổi toàn bộ giao diện. Thật gọn gàng và hiệu quả!
Tương tác và Điều khiển CSS Variables bằng JavaScript
Sức mạnh của CSS Variables không chỉ dừng lại ở CSS. Chúng ta có thể đọc và thay đổi giá trị của chúng một cách linh hoạt bằng JavaScript. Điều này mở ra khả năng tạo ra các giao diện tương tác cao, nơi người dùng có thể tùy chỉnh trực tiếp.
Cách đọc giá trị của một CSS Variable
Để lấy giá trị hiện tại của một biến, bạn có thể dùng getComputedStyle() và getPropertyValue().
// Lấy element bạn muốn đọc biến từ (thường là :root)
const root = document.documentElement;
// Lấy giá trị của biến --primary-color
const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color').trim();
console.log(primaryColor); // Output: '#007bff'
Lưu ý: getPropertyValue sẽ trả về giá trị kèm theo khoảng trắng, nên dùng .trim() để làm sạch kết quả.
Cách thay đổi (set) giá trị của một CSS Variable
Để cập nhật giá trị của một biến, chúng ta sử dụng phương thức setProperty() trên thuộc tính style của element.
const root = document.documentElement;
// Thay đổi giá trị của biến --primary-color
function changePrimaryColor(newColor) {
root.style.setProperty('--primary-color', newColor);
}
// Giờ bạn có thể gọi hàm này từ một color picker chẳng hạn
changePrimaryColor('#ff6347'); // Toàn bộ trang sẽ đổi màu chủ đạo
Khả năng này rất hữu ích cho các tính năng như cho phép người dùng tự tùy chỉnh màu sắc giao diện, hoặc thay đổi giao diện dựa trên hành động của người dùng trong thời gian thực.
So sánh CSS Variables và Biến Preprocessor (SASS/LESS)
Nếu đã từng sử dụng SASS hoặc LESS, bạn có thể thắc mắc: “Biến của chúng khác gì CSS Variables?”. Đây là một câu hỏi rất hay, và câu trả lời nằm ở bản chất hoạt động của chúng.
Sự khác biệt cốt lõi là gì?
Sự khác biệt lớn nhất giữa SASS variables và CSS variables là thời điểm chúng được xử lý.
- Biến SASS/LESS (Preprocessor): Chúng tồn tại trong file
.scsshoặc.lesscủa bạn. Khi bạn biên dịch code, preprocessor sẽ tìm tất cả các biến và thay thế chúng bằng giá trị tĩnh trong file CSS đầu ra. Trình duyệt không hề biết đến sự tồn tại của các biến này. Chúng chỉ là công cụ cho lập trình viên lúc viết code. - CSS Variables (Native): Chúng tồn tại ngay trong file
.cssvà được trình duyệt hiểu và xử lý trực tiếp. Điều này có nghĩa là chúng hoàn toàn động. Bạn có thể xem, thay đổi chúng trong DevTools, và điều khiển chúng bằng JavaScript ngay trên trình duyệt.
Nói một cách đơn giản, biến SASS là tĩnh, biến CSS là động.
Khi nào nên dùng loại nào?
Cả hai đều có giá trị và có thể cùng tồn tại trong một dự án. Quy tắc chung là:
- Dùng biến Preprocessor (SASS/LESS) khi:
- Giá trị đó không bao giờ thay đổi khi ứng dụng đang chạy (ví dụ: một tỷ lệ cố định, một breakpoint).
- Bạn cần thực hiện các phép tính phức tạp với màu sắc hoặc số học mà CSS thuần chưa hỗ trợ tốt.
- Dùng CSS Variables khi:
- Bạn cần giá trị có thể thay đổi động (ví dụ: theming, responsive design).
- Bạn muốn tương tác với giá trị đó bằng JavaScript.
- Bạn muốn code CSS của mình gọn gàng, không phụ thuộc vào công cụ biên dịch.
Ứng dụng CSS Variables trong các Framework Hiện đại
CSS Variables tích hợp một cách hoàn hảo với các framework JavaScript hiện đại như React, Vue, hay Angular. Khả năng tương tác với JavaScript giúp chúng trở thành cầu nối lý tưởng giữa logic của component và styling.
Cách sử dụng CSS Variables hiệu quả trong React
Trong React, bạn có thể truyền props từ component cha xuống component con để thay đổi giao diện. Việc kết hợp props với CSS Variables là một cách làm cực kỳ mạnh mẽ và sạch sẽ.
Bạn có thể set giá trị cho một biến CSS trực tiếp thông qua thuộc tính style của một element. Điều này cho phép bạn tạo ra các component có khả năng tùy biến cao.
Ví dụ, hãy tạo một component Avatar có thể tùy chỉnh kích thước thông qua prop size:
// Avatar.css
.avatar {
/* Dùng biến --avatar-size với giá trị mặc định */
width: var(--avatar-size, 60px);
height: var(--avatar-size, 60px);
border-radius: 50%;
background-color: #ccc;
display: block;
}
// Avatar.js
function Avatar({ size, imageUrl }) {
// Tạo một object style để set biến CSS
const avatarStyle = {
'--avatar-size': size ? `${size}px` : undefined
};
return (
<img
src={imageUrl}
className="avatar"
style={avatarStyle}
alt="User avatar"
/>
);
}
Bằng cách này, bạn có thể dễ dàng sử dụng component <Avatar size={100} /> và nó sẽ tự động điều chỉnh kích thước mà không cần viết thêm các class CSS phức tạp.
Lời kết
CSS Variables, hay Custom Properties, không còn là một tính năng mới mẻ. Chúng đã trở thành một công cụ nền tảng, được hỗ trợ rộng rãi bởi các trình duyệt và là một phần không thể thiếu trong quy trình làm việc của lập trình viên front-end hiện đại.
Chúng ta đã cùng nhau tìm hiểu từ định nghĩa, lợi ích, cú pháp cho đến các ứng dụng thực tế như tạo Dark Mode và tương tác với JavaScript. Điểm mấu chốt cần nhớ là CSS Variables giúp code của bạn DRY, dễ bảo trì, và cực kỳ linh hoạt.
Lời khuyên của WiWeb là hãy bắt đầu áp dụng chúng ngay hôm nay. Bạn không cần phải viết lại toàn bộ dự án. Hãy bắt đầu từ những thứ nhỏ nhất, như định nghĩa bộ màu sắc hay các giá trị khoảng cách chung. Dần dần, bạn sẽ thấy stylesheet của mình trở nên ngăn nắp và mạnh mẽ hơn rất nhiều.
Bạn đã áp dụng CSS Variables vào dự án của mình chưa? Hãy chia sẻ kinh nghiệm hoặc bất kỳ câu hỏi nào ở phần bình luận bên dưới nhé!
Nếu bạn cần thiết kế website chuyên nghiệp được xây dựng trên những nền tảng công nghệ hiện đại và tối ưu, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!
09/01/2026
08/01/2026
07/01/2026
06/01/2026
05/01/2026
04/01/2026