Biến trong css

Cú pháp khai báo biến
Cách sử dụng biến
Biến cục bộ trong css
Giá trị mặc định biến css
Kế thừa biến trong css
Ứng dụng phổ biến của biến CSS
Ví dụ thực tế biến css

Biến trong CSS (CSS Variables), hay còn gọi là Custom Properties, là một tính năng cho phép bạn định nghĩa và tái sử dụng các giá trị trong CSS một cách linh hoạt. Chúng giúp code gọn gàng, dễ bảo trì và chỉnh sửa.

1. Cú pháp khai báo biến

Biến CSS được khai báo bên trong một selector, thường là :root để biến có thể dùng toàn cục:

:root {
--main-color: #d63018;
--text-color: #ffffff;
--border-radius: 5px;
}

    --main-color là tên biến.

    #d63018 là giá trị biến.

    :root là selector đại diện cho phần tử gốc của tài liệu HTML (thường là <html>), tương tự như biến global.

2. Cách sử dụng biến

Dùng hàm var(--ten-bien) để gọi biến:

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

3. Biến cục bộ trong css

Bạn có thể khai báo biến trong một selector cụ thể để dùng nội bộ:

.card {
--card-padding: 20px;
padding: var(--card-padding);
}

Biến --card-padding chỉ áp dụng bên trong .card và các phần tử con.

4. Giá trị mặc định biến css

Nếu biến không được định nghĩa, bạn có thể đặt giá trị mặc định:

color: var(--not-set, #333333);

5. Kế thừa biến trong css

Biến CSS có thể kế thừa từ phần tử cha, rất phù hợp để xây dựng hệ thống màu sắc, spacing trong toàn bộ giao diện.

6. Ứng dụng phổ biến của biến CSS

    Theme (chủ đề): Thay đổi toàn bộ giao diện chỉ bằng cách đổi vài biến.

    Responsive Design: Dễ điều chỉnh kích thước, padding/margin, font-size theo từng media query.

    Dark/Light Mode: Chuyển đổi giao diện bằng cách thay đổi bộ biến màu.

    Tái sử dụng giá trị nhiều nơi (như màu sắc, bo góc, đổ bóng, font size,...)

7. Ví dụ thực tế biến css

:root {
--primary-color: #3498db;
--hover-color: #2980b9;
}

.button {
background-color: var(--primary-color);
transition: background-color 0.3s ease;
}

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

Tìm kiếm:

Biến trong css là gì, tại sao lập trình ứng dụng web cần sử dụng biến.