1. Hàm var() trong CSS

1.1 Khái niệm

Hàm var() được sử dụng để chèn giá trị của một biến trong CSS

Các biến trong CSS có quyền truy cập vào DOM, có nghĩa là bạn có thể tạo các biến toàn cục hoặc cục bộ, thay đổi các biến bằng JavaScript và thay đổi các biến dựa trên các truy vấn phương tiện

Một cách tốt để sử dụng các biến CSS là khi nói đến màu sắc của thiết kế của bạn. Thay vì sao chép và dán các màu giống nhau lặp đi lặp lại, bạn có thể đặt chúng vào các biến

1.2 Cách hoạt động của hàm var()

Trước hết: Các biến trong CSS có thể có phạm vi toàn cục hoặc cục bộ

Các biến toàn cục có thể được truy cập / sử dụng thông qua toàn bộ tài liệu, trong khi các biến cục bộ chỉ có thể được sử dụng bên trong bộ chọn nơi nó được khai báo

Để tạo một biến có phạm vi toàn cục, hãy khai báo biến đó bên trong bộ chọn :root. Bộ chọn :root khớp với phần tử gốc của tài liệu

Để tạo một biến với phạm vi cục bộ, hãy khai báo nó bên trong bộ chọn sẽ sử dụng nó.

Ví dụ sau bằng với ví dụ trên, nhưng ở đây chúng ta sử dụng hàm var()

Đầu tiên, chúng ta khai báo hai biến toàn cục (–blue và –white). Sau đó, chúng ta sử dụng hàm var() để chèn giá trị của các biến sau này vào bảng kiểu:

Ưu điểm của việc sử dụng var() là:

• làm cho mã dễ đọc hơn (dễ hiểu hơn)
• giúp thay đổi các giá trị màu dễ dàng hơn nhiều

Mẹo: Để thay đổi màu bạn chỉ cần thay đổi hai giá trị của biến

1.3 Trình duyệt hỗ trợ

Hàm
var()	49.0	15.0	31.0	9.0	36.0

2. Ghi đề các biến trong CSS

2.1 Ghi đè biến toàn cục bằng biến cục bộ

Đôi khi chúng ta muốn các biến chỉ thay đổi trong một phần cụ thể của trang

Giả sử chúng ta muốn có một màu xanh khác cho các phần tử <button>. Sau đó, chúng ta có thể khai báo lại biến –blue bên trong bộ chọn nút. Khi chúng ta sử dụng var(–blue) bên trong bộ chọn này, nó sẽ sử dụng giá trị biến cục bộ –blue được khai báo ở đây

Chúng ta thấy rằng biến –blue cục bộ sẽ ghi đè biến –blue toàn cục cho các phần tử nút

Ví dụ:

2.2 Thêm một biến cục bộ mới

Nếu một biến chỉ được sử dụng ở một nơi duy nhất, chúng ta cũng có thể đã khai báo một biến cục bộ mới, như thế này:

3.Thay đổi các biến bằng JavaScript

Các biến trong CSS có quyền truy cập vào DOM, có nghĩa là bạn có thể thay đổi chúng bằng JavaScript

Ví dụ:

4. Sử dụng biến trong truy vấn phương tiện trong CSS

Bây giờ chúng ta muốn thay đổi một giá trị biến bên trong một truy vấn phương tiện.

Mẹo: Truy vấn phương tiện là xác định các quy tắc kiểu khác nhau cho các thiết bị khác nhau (màn hình, máy tính bảng, điện thoại di động, v.v.)

Ở đây, trước tiên chúng ta khai báo một biến cục bộ mới có tên –fontsize cho lớp .container. Chúng tôi đặt giá trị của nó là 25 pixel. Sau đó, chúng tôi sử dụng nó trong lớp .container sâu hơn. Sau đó, chúng tôi tạo quy tắc @media có nội dung “Khi chiều rộng của trình duyệt là 450px trở lên, hãy thay đổi giá trị biến –fontsize của lớp .container thành 50px.”

Ví dụ: