CSS Variables, hay còn được gọi là "custom properties" (thuộc tính tùy chỉnh), cho phép bạn khai báo và tái sử dụng giá trị trong toàn bộ file CSS. CSS Variables giúp mã CSS của bạn trở nên dễ đọc, dễ bảo trì, và giảm thiểu lỗi khi cần thay đổi một giá trị được sử dụng nhiều nơi. Với var() function, bạn có thể truy cập và áp dụng giá trị của biến CSS vào bất kỳ thuộc tính nào.

Bài viết này là một phần trong chuỗi học CSS trên "codetuthub.com", cùng với các chủ đề như CSS Functions, CSS Inheritance, và CSS Specificity.

1. Tạo CSS Variables

CSS Variables được khai báo với hai dấu gạch ngang -- trước tên biến và thường được đặt trong :root (toàn cục) để sử dụng trong toàn bộ file CSS.

Ví dụ tạo CSS Variables

css
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size-large: 18px;
    --spacing: 10px;
}

Trong ví dụ trên:

  • --primary-color và --secondary-color là các biến màu.
  • --font-size-large và --spacing là các biến dùng cho kích thước và khoảng cách.

2. Sử dụng biến với hàm var()

Để sử dụng biến, bạn chỉ cần gọi hàm var() và đưa tên biến vào trong ngoặc.

Ví dụ sử dụng var()

css
.button {
    background-color: var(--primary-color);
    color: #fff;
    font-size: var(--font-size-large);
    padding: var(--spacing);
}

Trong ví dụ này, các thuộc tính của .button như background-color, font-size, và padding sử dụng các biến đã khai báo trong :root, giúp việc thay đổi giao diện dễ dàng hơn.

3. Sử dụng giá trị dự phòng trong var()

CSS Variables cho phép bạn chỉ định một giá trị dự phòng trong trường hợp biến không được định nghĩa hoặc không hợp lệ. Giá trị dự phòng được đặt sau dấu phẩy trong hàm var().

Ví dụ sử dụng giá trị dự phòng

css
.card {
    background-color: var(--card-bg, #f3f3f3);
    padding: var(--card-padding, 20px);
}

Trong ví dụ này:

  • Nếu --card-bg không được định nghĩa, #f3f3f3 sẽ được sử dụng làm màu nền.
  • Nếu --card-padding không được định nghĩa, giá trị 20px sẽ được sử dụng.

4. Ưu điểm của CSS Variables

4.1 Dễ dàng bảo trì

Với CSS Variables, bạn có thể thay đổi giá trị một cách nhanh chóng tại một nơi duy nhất, sau đó giá trị này sẽ được áp dụng cho toàn bộ file CSS.

4.2 Kế thừa và ghi đè

CSS Variables có thể kế thừa và ghi đè trong các phạm vi khác nhau. Ví dụ, bạn có thể định nghĩa biến toàn cục trong :root, nhưng ghi đè nó trong một phần tử cụ thể.

Ví dụ ghi đè biến

css
:root {
    --font-color: #333;
}

.dark-theme {
    --font-color: #fff;
}

.text {
    color: var(--font-color);
}

Trong ví dụ này:

  • --font-color có giá trị mặc định là #333.
  • Trong class .dark-theme, biến --font-color được ghi đè thành #fff.

5. Kết hợp CSS Variables với các hàm khác

Bạn có thể kết hợp var() với các hàm CSS khác như calc(), rgb(), và hsl() để tạo các giá trị phức tạp.

Ví dụ kết hợp với calc()

css
.container {
    width: calc(100% - var(--spacing) * 2);
}

Trong ví dụ này, hàm calc() sử dụng biến --spacing để tính toán độ rộng của .container, giúp bố cục linh hoạt và dễ điều chỉnh hơn.

Ví dụ kết hợp với rgb()

css
:root {
    --primary-red: 52;
    --primary-green: 152;
    --primary-blue: 219;
}

.button {
    background-color: rgb(var(--primary-red), var(--primary-green), var(--primary-blue));
}

Ở đây, rgb() sử dụng các biến màu --primary-red, --primary-green, và --primary-blue để tạo màu nền, giúp dễ dàng tùy chỉnh từng thành phần của màu.

6. Tạo chủ đề (theme) với CSS Variables

CSS Variables rất phù hợp để tạo chủ đề sáng và tối cho giao diện chỉ với một vài thay đổi nhỏ.

Ví dụ tạo chủ đề sáng và tối

css
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
}

.dark-theme {
    --bg-color: #333333;
    --text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

Trong ví dụ này:

  • --bg-color và --text-color được khai báo cho giao diện sáng.
  • Khi áp dụng class .dark-theme cho body, nền và màu chữ sẽ thay đổi cho phù hợp với giao diện tối.

7. Phạm vi của CSS Variables

CSS Variables có thể được khai báo ở bất kỳ đâu trong CSS, nhưng scope (phạm vi) của biến phụ thuộc vào nơi nó được khai báo:

  • Biến khai báo trong :root có phạm vi toàn cục và áp dụng cho toàn bộ tài liệu.
  • Biến khai báo trong một phần tử cụ thể chỉ áp dụng cho phần tử đó và các phần tử con.

Ví dụ về phạm vi biến

css
:root {
    --main-padding: 20px;
}

.section {
    --main-padding: 15px; /* Biến cục bộ chỉ áp dụng cho .section */
}

.main-content {
    padding: var(--main-padding); /* Sử dụng biến toàn cục */
}

.section-content {
    padding: var(--main-padding); /* Sử dụng biến cục bộ của .section */
}

Trong ví dụ này:

  • .main-content sử dụng giá trị --main-padding từ :root.
  • .section-content sử dụng giá trị --main-padding từ .section nếu .section chứa .section-content.

8. Lưu ý khi sử dụng CSS Variables

  • Hỗ trợ trình duyệt: CSS Variables được hỗ trợ trên hầu hết các trình duyệt hiện đại, nhưng nếu bạn cần hỗ trợ các trình duyệt cũ, hãy đảm bảo kiểm tra khả năng tương thích.
  • Phân biệt chữ hoa chữ thường: CSS Variables phân biệt chữ hoa và chữ thường. --PrimaryColor và --primarycolor là hai biến khác nhau.
  • Đặt giá trị mặc định: Luôn đặt giá trị dự phòng trong var() để đảm bảo giao diện không bị lỗi nếu biến không khả dụng.

9. Kết luận

CSS Variables là một công cụ mạnh mẽ giúp mã CSS của bạn trở nên linh hoạt, dễ bảo trì và tối ưu hơn. Với khả năng tái sử dụng giá trị và dễ dàng cập nhật, CSS Variables giúp bạn tạo ra giao diện nhất quán và hiệu quả. Để tìm hiểu thêm về các kỹ thuật CSS nâng cao, hãy xem các bài học khác trên "codetuthub.com" như CSS Functions, CSS Inheritance, và CSS Specificity.