CSS3 Variables là gì ? Ứng dụng của CSS3 Variables

1. Cú pháp

Ta khai báo CSS3 Variables thông qua dấu “- -“ ví dụ:

 
:root{
       /*Setup color for background */
	--primary-bg-color: #fff;
	--secondary-bg-color:#fff;
       /*Setup color for background */

       /*Setup color for text */
        --primary-color: #333;
	--secondary-color:#000;
       /*Setup color for text */

       /*Setup font-size for text */
	--title-section-size:36px;
	--title-item-size:20px;
        /*Setup font-size for text */

	--primary-padding: 10px;
	--secondary-padding: 20px;
}

Đoạn ví dụ trên mình có set up một vài variables như màu cho background hay màu cho text. Đây là những  màu mình hay dùng , do web thường có 2 màu chính nên việc khách hàng đổi màu khiến chúng ta đổi màu trong file css cũng rất khó khăn nếu như ta không xài LESS hay SASS. Vậy nếu muốn sử dụng thị mình khai báo như thế nào?

 
::selection {
    background-color: var(--primary-bg-color);
    color: #fff;
}

Như các bạn thấy khi gọi CSS3 Variables chỉ việc gọi trong var(). Rất dễ đúng không nào.

2. Phạm vi sử dụng

Tương tự như trong JavaScript, CSS variables cũng có khái niệm biến toàn cục và biến địa phương. Các biến toàn cục cần được khai báo trong selector :root, tương ứng với phần tử cấp cao nhất trong cây DOM. Mình có ví dụ trong phần 1

3. Thay đổi giá trị của biến

Chúng ta có thể thay đổi giá trị của biến trong tùy thuộc vào @media, @document, hay @support…

4. Truy xuất và thay đổi giá trị thông qua JavaScript

Ta truy suất bằng JavaScript thông qua cú pháp như sau:

const root = document.querySelector(':root');
// Ở đây mình DOM tới root 
const rootStyles = getComputedStyle(root);
const mainColor = rootStyles.getPropertyValue('--primary-bg-color');
// Phần này mình lấy giá trị của biến 
console.log(mainColor) // #fff;

Ở đây các bạn sẽ thắc mắc ứng dụng và vai trò của nó giống với SASS,  vậy sao chúng ta không nên xài SASS ngay từ đầu.  Vì thực ra biến của SASS chúng ta không thể thay đổi bằng JavaScript được. Chỉ có CSS3 Variables bị thay đổi bới JavaScript. Mình sẽ cho một ví dụ mình họa cụ thể:

const root = document.querySelector(':root');
// DOM tới :root
root.style.setProperty('--primary-bg-color', '#333');

5. Định nghĩa lại các thuộc tính trong Media Queries

Các bạn có thể định lại cái CSS3 Variables ở nhưng breakpoints khác nhau.

:root {
    --card-padding: 1rem;
}

@media (min-width: 600px) {
    :root {
        --card-padding: 1.25rem;
    }
}

@media (min-width: 1000px) {
    :root {
        --card-padding: 1.5rem;
    }
}

Thuộc tính tùy chỉnh đem đến một cơ chế mạnh mẽ để quản lý và làm việc với CSS. Tính năng này đặc biệt hữu ích khi các ứng dụng web ngày càng phức tạp về tính năng cũng như giao diện người dùng.