CSS Variables - The var() Function

Updated: 1 year ago

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.

Hy vọng bài viết này giúp bạn hiểu rõ về cách sử dụng CSS Variables và var() trong CSS, từ việc tạo biến, sử dụng giá trị dự phòng, đến cách tạo chủ đề cho giao diện của mình!

You said:

SEO

ChatGPT said:

ChatGPT

Dưới đây là thông tin SEO cho bài viết về CSS Variables - The var() Function:

Title: CSS Variables và Hàm var(): Hướng Dẫn Tạo Biến Trong CSS
Description: Khám phá cách sử dụng CSS Variables và hàm var() để tạo biến trong CSS, giúp mã dễ bảo trì và tái sử dụng. Hướng dẫn chi tiết về khai báo biến, giá trị dự phòng, và cách tạo chủ đề sáng/tối trong CSS.
Keywords: CSS variables, CSS custom properties, hướng dẫn var() CSS, tạo biến CSS, chủ đề sáng tối CSS, biến toàn cục CSS, sử dụng var() trong CSS, CSS variable tutorial

You said:

"CSS - The @property Rule"

ChatGPT said:

ChatGPT

Dưới đây là bài viết chi tiết về CSS - The @property Rule cho chuỗi bài học về CSS trên trang "codetuthub.com":

CSS - The @property Rule

CSS @property rule là một tính năng tiên tiến cho phép bạn xác định và quản lý các CSS Custom Properties (hay còn gọi là CSS Variables) một cách chặt chẽ hơn. @property cho phép bạn khai báo các biến CSS với các ràng buộc về kiểu giá trị, giá trị mặc định, và liệu giá trị đó có thể được chuyển tiếp qua transition hay không. Quy tắc này giúp biến CSS trở nên mạnh mẽ và an toàn hơn, đặc biệt khi sử dụng trong các hiệu ứng động.

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 Variables, CSS Transitions, và CSS Animations.

1. Tổng quan về `@property`

@property cho phép bạn khai báo một biến CSS với các đặc tính cụ thể. Điều này giúp bạn kiểm soát kiểu giá trị mà biến có thể nhận, đặt giá trị mặc định, và xác định xem giá trị có thể thay đổi qua transition không.

Cú pháp cơ bản của `@property`

css

@property --variable-name {
    syntax: '<data-type>';
    initial-value: value;
    inherits: true | false;
}

syntax: Định nghĩa kiểu dữ liệu của biến. Bạn có thể chỉ định loại dữ liệu như <color>, <length>, <number>, <percentage>, v.v.
initial-value: Giá trị mặc định của biến nếu không có giá trị khác được đặt.
inherits: Xác định xem biến có được thừa kế từ phần tử cha sang phần tử con hay không. Giá trị là true hoặc false.

2. Các thuộc tính của `@property`

2.1 syntax

syntax xác định kiểu dữ liệu cho biến. Định dạng này giúp bạn kiểm tra xem giá trị được gán có hợp lệ không, tránh lỗi không mong muốn trong quá trình sử dụng.

Ví dụ, bạn có thể sử dụng <color>, <length>, hoặc bất kỳ kiểu dữ liệu CSS nào.

css

@property --main-color {
    syntax: '<color>';
    initial-value: #3498db;
    inherits: false;
}

Trong ví dụ này, biến --main-color chỉ chấp nhận các giá trị dạng <color>, ví dụ như mã màu hex hoặc tên màu.

2.2 initial-value

initial-value cho phép bạn đặt giá trị mặc định cho biến khi biến chưa được gán giá trị khác.

css

@property --spacing {
    syntax: '<length>';
    initial-value: 10px;
    inherits: true;
}

Ở đây, biến --spacing sẽ có giá trị mặc định là 10px.

2.3 inherits

inherits xác định liệu biến có được kế thừa từ phần tử cha sang phần tử con hay không.

true: Biến sẽ kế thừa giá trị từ phần tử cha.
false: Biến sẽ không kế thừa giá trị từ phần tử cha.

css

@property --opacity-level {
    syntax: '<number>';
    initial-value: 1;
    inherits: false;
}

Trong ví dụ này, biến --opacity-level sẽ không kế thừa từ phần tử cha và sẽ có giá trị mặc định là 1.

3. Ví dụ sử dụng `@property` trong CSS

3.1 Tạo biến màu với giá trị mặc định và kiểm tra kiểu

css

@property --highlight-color {
    syntax: '<color>';
    initial-value: #ff6347;
    inherits: false;
}

.box {
    background-color: var(--highlight-color);
}

Trong ví dụ này, --highlight-color được khai báo với kiểu <color> và giá trị mặc định là #ff6347. Nếu giá trị khác không hợp lệ (như 10px), CSS sẽ bỏ qua và dùng #ff6347 làm màu nền.

3.2 Sử dụng biến khoảng cách với `@property` cho hiệu ứng động

css

@property --box-spacing {
    syntax: '<length>';
    initial-value: 15px;
    inherits: false;
}

.container {
    padding: var(--box-spacing);
    transition: padding 0.3s ease;
}

.container:hover {
    --box-spacing: 25px;
}

Trong ví dụ này:

--box-spacing được xác định với kiểu <length>, đảm bảo chỉ nhận các giá trị hợp lệ như px, em, rem.
Khi di chuột vào .container, giá trị của --box-spacing thay đổi từ 15px thành 25px, và transition giúp hiệu ứng diễn ra mượt mà.

4. Tạo hiệu ứng động mượt mà với `@property` và `transition`

@property đặc biệt hữu ích khi kết hợp với transition để tạo hiệu ứng động cho các biến CSS. Bạn có thể đặt thuộc tính inherits: true để biến có thể kế thừa qua các phần tử con, tạo sự nhất quán về thiết kế.

Ví dụ hiệu ứng chuyển màu khi hover

css

@property --button-color {
    syntax: '<color>';
    initial-value: #3498db;
    inherits: false;
}

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

.button:hover {
    --button-color: #2ecc71;
}

Ở đây, khi di chuột vào .button, màu nền sẽ thay đổi từ #3498db sang #2ecc71 một cách mượt mà.

5. Tạo chủ đề với `@property`

Bạn có thể sử dụng @property để tạo các chủ đề (theme) sáng và tối. @property cho phép bạn kiểm tra và giới hạn các giá trị phù hợp, đảm bảo màu sắc và kích thước được áp dụng chính xác.

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

css

/* Định nghĩa biến cho màu nền */
@property --background-color {
    syntax: '<color>';
    initial-value: #ffffff;
    inherits: true;
}

/* Định nghĩa biến cho màu chữ */
@property --text-color {
    syntax: '<color>';
    initial-value: #333333;
    inherits: true;
}

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

/* Chủ đề tối */
.dark-theme {
    --background-color: #333333;
    --text-color: #ffffff;
}

Khi class .dark-theme được thêm vào phần tử body, giao diện sẽ chuyển sang chủ đề tối với màu nền và màu chữ phù hợp.

6. Sử dụng `@property` trong thiết kế responsive

@property có thể kết hợp với Media Queries để tạo biến tùy chỉnh cho thiết kế responsive, cho phép bạn kiểm soát các giá trị linh hoạt dựa trên kích thước màn hình.

Ví dụ sử dụng biến khoảng cách responsive

css

@property --responsive-spacing {
    syntax: '<length>';
    initial-value: 10px;
    inherits: false;
}

.container {
    padding: var(--responsive-spacing);
}

@media (min-width: 768px) {
    .container {
        --responsive-spacing: 20px;
    }
}

Trong ví dụ này, biến --responsive-spacing thay đổi từ 10px thành 20px trên màn hình lớn hơn 768px, giúp bố cục linh hoạt và dễ quản lý.

7. Lưu ý khi sử dụng `@property`

Hỗ trợ trình duyệt: @property hiện chưa được hỗ trợ trên tất cả các trình duyệt, đặc biệt là trên các trình duyệt cũ. Hãy kiểm tra khả năng tương thích trước khi áp dụng vào dự án thực tế.
Sử dụng syntax phù hợp: Đảm bảo kiểu dữ liệu trong syntax phù hợp với giá trị bạn muốn sử dụng, để tránh lỗi trong quá trình render.
Tối ưu cho hiệu ứng động: @property rất mạnh mẽ khi kết hợp với các hiệu ứng động như transition và animation, giúp CSS Variables trở nên linh hoạt và mượt mà hơn.

8. Kết luận

CSS @property là một công cụ hữu ích và mạnh mẽ, giúp bạn kiểm soát chặt chẽ hơn các biến CSS với khả năng quản lý kiểu dữ liệu, giá trị mặc định, và tính kế thừa. Với @property, CSS Variables không chỉ trở nên dễ bảo trì hơn mà còn giúp tạo ra các hiệu ứng động mượt mà và đáng tin cậy. Để tìm hiểu thêm về các kỹ thuật CSS nâng cao, hãy xem thêm các bài viết khác trên "codetuthub.com" như CSS Variables, CSS Transitions, và CSS Animations.

Support My Work ☕

If you enjoy the tutorials on CodeTutHub, consider buying me a coffee to keep this platform free!

Buy Me a Coffee

Author

I'm Toan Nguyen, a full-stack web developer with over 10 years of experience in designing and developing web systems and applications. I specialize in modern technologies like Laravel, React, Vue.js, and Node.js, and I'm passionate about sharing knowledge through articles, courses, and open-source projects. I want to help the programming community grow stronger by providing detailed, easy-to-understand, and practical guides through a series of articles on codetuthub.com.

Thank you for taking the time to read this article, and I look forward to receiving your feedback to make the content even better. You can connect with me on LinkedIn and Facebook or feel free to leave a comment below!🌟