Tidadigi Logo

CSS Variables

CSS variables (custom properties) là các giá trị có thể tái sử dụng. Chúng được định nghĩa bằng hai dấu gạch ngang (--) giúp code CSS hiệu quả. Ngoài ra việc bảo trì cũng dễ dàng hơn.

  • Lưu trữ các giá trị như màu sắc, kích thước hoặc phông chữ tại một nơi. Việc này giúp cập nhật tập trung hơn.
  • Sử dụng var() để áp dụng các biến này ở bất kỳ đâu trong CSS của bạn.
  • Cải thiện khả năng đọc code và tính nhất quán trong toàn bộ style của bạn.

Syntax

var( --custom-name, value );

Parameters

  • --custom-name: (Required) Tên của custom property, bắt đầu bằng hai dấu gạch ngang (--).
  • value: (Optional) Một giá trị được sử dụng nếu custom property không được xác định hoặc không hợp lệ.
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        :root {
            --main-bg-color: lightblue;
            --main-text-color: darkblue;
        }
        body {
            background-color: var(--main-bg-color);
            color: var(--main-text-color);
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a sample paragraph demonstrating CSS variables.</p>
</body>
</html>
<!--Driver Code Ends-->

More Example of CSS Variable

. Themed Button Using CSS Variables

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        :root {
            --button-bg: #4CAF50;
            --button-text: white;
            --button-padding: 10px 20px;
        }
        .btn {
            background-color: var(--button-bg);
            color: var(--button-text);
            padding: var(--button-padding);
            border: none;
            cursor: pointer;
        }
        .btn:hover {
            background-color: darkgreen;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <button class="btn">Click Me</button>
</body>
</html>

<!--Driver Code Ends-->

In this example

  • :root định nghĩa --btn-bg cho background của button và --btn-text cho màu chữ.
  • Các biến này được áp dụng để tạo kiểu cho button. Điều này giúp dễ dàng cập nhật theme. Chỉ cần thay đổi giá trị trong :root.

. Dynamic Spacing Using CSS Variables

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        :root {
            --spacing: 20px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin: var(--spacing);
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends-->


In this example:

  • :root định nghĩa --spacing để thiết lập khoảng cách đồng nhất giữa các box.
  • Thay đổi giá trị --spacing trong :root điều chỉnh margin cho tất cả các phần tử .box.

Best Practices for CSS Variables

  • Define Variables in :root: Khai báo các biến toàn cục trong selector :root. Điều này đảm bảo chúng có thể truy cập được trong toàn bộ stylesheet.
  • Use Descriptive Naming: Chọn tên rõ ràng và mô tả cho các biến. Mục đích là để tăng cường khả năng đọc hiểu. Ngoài ra còn để duy trì code tốt hơn.
  • Leverage the Cascade: Tận dụng khả năng kế thừa của CSS variables. Chúng có thể được ghi đè trong các phạm vi cụ thể. Điều này cho phép tạo theme linh hoạt và style component.

Last Updated : 21/07/2025