Khi nói tới biến(Variables) trong CSS chắc hẳn nhiều người sẽ nghĩ tới SASS/SCSS. Nhưng không, ở đây mình đang nói tới biến trong CSS (#CSS variables), CSS đã hỗ trợ điều này. Không cần bộ tiền xử lý và không cần biên dịch nữa 🥳
Phạm vi toàn cầu sẽ cho phép bạn truy cập biến ở mọi nơi. Phạm vi địa phương sẽ chỉ nằm trong CSS selector cụ thể của bạn 👍
:root {
/* 1. Defining in Global Scope */
--color: red;
/* 2. Available in all selector*/
color: var(--color); /* red */
}
.local {
/* 1. Defining in Local Scope */
--color: blue;
/* 2. Scoped to the .local class only */
color: var(--color); /* blue */
}
Trùng lặp mã CSS
Trước đây, tôi nhớ mình đã phải tạo rất nhiều CSS trùng lặp…
.subtitle {
color: #999;
}
.subtext {
color: #999;
}
Điều này làm cho tôi rất khó chịu khi phải viết nhiều CSS trùng lặp như vậy!
SASS là một giải pháp
Và sau đó tôi phát hiện ra Sass. Và cuối cùng tôi có thể sử dụng các biến!
$secondary-color: #999;.subtitle {
color: $secondary-color;
}
.subtext {
color: $secondary-color;
}
Tất cả đều tuyệt vời. Nhưng sau đó, bạn phải đối phó với việc cài đặt Sass vào dự án của mình, bạn cần phải config với bộ xử lý và biên dịch của nó trước khi nó cỏ thể hoạt động.
Và đối với một dự án nhỏ, sử dụng SASS có vẻ không cần thiết lắm 😅
CSS là người hùng của tôi 💪
Quay lại với biến trong CSS. Bây giờ tôi có thể đặt một biến nguyên bản. Không có bộ xử lý trước, không cần cài đặt thêm, chỉ cần CSS đơn giản.
:root {
--secondary-color: #999;
}
.subtitle {
color: var(--secondary-color);
}
.subtext {
color: var(--secondary-color);
}
Cú pháp biến CSS (CSS Variable Syntax)
1. Khai báo một biến CSS
Bạn đặt trước tên biến của mình bằng 2 dấu gạch ngang --
--variable-name: some-value;
2. Sử dụng biến CSS
Và để sử dụng nó. Bạn sử dụng chuyển tên biến của mình vào var()
css-property: var(--variable-name);
Phạm vi trong Biến CSS
Bạn có thể khai báo biến CSS của mình trong phạm vi toàn cầu, nghĩa là nó có thể có sẵn trong toàn bộ ứng dụng của bạn. Hoặc bạn có thể chỉ đặt biến CSS trong phạm vi cục bộ, nơi nó chỉ khả dụng trong bộ chọn cụ thể.
Phạm vi toàn cầu
Để khai báo nó trong phạm vi toàn cục, trước tiên bạn đặt định nghĩa của mình bên trong :root{}
:root {
--primary-color: #000;
}
h1 {
color: var(--primary-color);
}
Phạm vi địa phương
Để khai báo nó trong phạm vi cục bộ, bạn chỉ cần xác định biến bên trong khối phần tử của mình. Và biến đó chỉ có sẵn trong bộ chọn đó. Nếu bạn đã cố gắng sử dụng ở đâu đó, nó sẽ không có tác dụng.
h2 {
--h2-color: #999;
color: var(--h2-color);
}
h3 {
/* No Effect */
color: var(--h2-color);
}
Ghi đè giá trị biến CSS
Điều tuyệt vời là bạn có thể ghi đè giá trị global, do đó có thể đặt một cái gì đó duy nhất cho một ngữ cảnh cụ thể.
:root {
--default-color: pink;
}
.content {
/* Override the global css variable */
--default-color: green;
}
p {
color: var(--default-color);
}
<p>Default "Pink" color</p>
<div class="content">
<p>Overridden "Green" color</p>
</div>
Đặt giá trị dự phòng (Fallback Value)
Điều gì xảy ra khi bạn sử dụng một biến chưa bao giờ được chỉ định 🤔
p {
color: var(--color);
}
Câu trả lời là KHÔNG CÓ GÌ XẢY RA. Ứng dụng của bạn không bị lỗi, chỉ là nó không nhận CSS Variable --color đó thôi .
Tôi đoán điều đó thật tuyệt. Nhưng nếu điều đó có vẻ hơi rủi ro, bạn có thể đặt Giá trị dự phòng.
p {
color: var(--color, pink);
}
<p>Pink color</p>
Và nếu bạn xác định nó, màu đã xác định sẽ hiển thị.
p {
--color: black;
color: var(--color, pink);
}
<p>Black color</p>
Sử dụng biến CSS trong JavaScript
Điều tốt nhất khi sử dụng biến CSS thay vì biến Sass là bạn có thể truy cập nó bằng JavaScript! Và bạn biết đấy khi JS tham gia bữa tiệc, mọi thứ sẽ trở nên điên cuồng.
Hãy xem qua cách sử dụng khái niệm cơ bản và xem cách chúng tôi có thể truy xuất và đặt các biến CSS của mình.
Lấy từ kiểu nội tuyến (inline style CSS)
Nếu bạn đặt biến CSS của mình thông qua kiểu nội tuyến.
<p style="--color: red"></p>
Bạn sẽ truy xuất giá trị của mình bằng getPropertyValue()
// Get our <p> element
const element = document.querySelector('p');
// Retrieve our CSS variable "--color"
element.style.getPropertyValue('--color'); // 'red'
Lấy từ style tag hoặc CSS file (inline style CSS)
Nếu bạn đặt biến CSS của mình trong thẻ style hoặc tệp CSS bên ngoài.
<style>
p {
--color: red;
}
</style>
Bạn cần sử dụng cái này trước tiên getComputedStyle()
// Get our <p> element
const element = document.querySelector('p');
// Retrieve our CSS variable "--color"
getComputedStyle(element).getPropertyValue('--color'); // 'red'
Bạn cũng có thể sử dụng cách này để truy xuất kiểu inline style của bạn.
<p style="--color: red"></p>
// Get our <p> element
const element = document.querySelector('p');
// Retrieve our CSS variable "--color"
getComputedStyle(element).getPropertyValue('--color'); // 'red'
Đặt một biến CSS với JS
// Get our <p> element
const element = document.querySelector('p');
// Set our "--color" variable to be "blue"
element.style.setProperty('--color', 'blue');
Ví dụ đơn giản
Hãy tập hợp mọi thứ lại với nhau và xem một ví dụ đơn giản. Ở đây tôi muốn đổi màu văn bản khi được nhấp vào.
<p class="demo"style="--color:red; color: var(--color)">This is demo. Let click me!</p>
// Get our <p> element
const element = document.querySelector('p.demo');
// On click, change text from "red" to "blue"
element.addEventListener('click', function() {
element.style.setProperty('--color', 'blue');
});
This is demo. Let click me!
Browser Support
Ngoài Internet Explorer thì tất cả các trình duyệt khác đều hỗ trợ CSS Variables.
Browser Support: CSS Variables
Trên đây là bài viết giới thiệu và sử dụng CSS Variables. Cảm ơn vì đã đọc ❤