CSS3 17 – Tìm hiểu về Variables (biến) trong CSS

0
119
Tìm hiểu về Variables trong CSS

Nhiều lập trình viên đang bắt đầu sử dụng CSS variables (biến), hay được biết đến với tên gọi đúng hơn là CSS custom properties. Lý do là vì nó mang lại 1 số lợi ích rõ ràng hơn là kiểu CSS truyền thống hay còn gọi là CSS preprocessor variables (biến trong các CSS preprocessor như LESS hoặc SASS).

Biến luôn tồn tại trong tất cả các ngôn ngữ lập trình, và đó là bởi vì chúng rất hữu ích. Bạn chỉ cần lưu trữ 1 giá trị trong 1 biến 1 lần, và sau đó bạn có thể sử dụng nó sau này nhiều lần, tránh sự lặp lại. Mắc dù CSS không phải là 1 ngôn ngữ lập trình, nhưng việc thiếu biến vẫn hạn chế khả năng của nó.

Vậy chúng ta sẽ cùng đi tìm hiểu những lợi ích mà CSS custom properties mang lại là gì, cùng 1 số tính năng và thủ thuật ít được biết đến trong khi sử dụng chúng nhé.

Lợi ích của CSS Variables

Cú pháp sử dụng biến có 1 chút dài dòng và 1 số nhà phát triển có thể không thích và sợ dùng nó. Một yếu tố khuyến khích việc sử dụng biến tự nhiên là sự hỗ trợ sẵn có được cung cấp bởi các biến SASS.

Mặc dù các preprocessor như Sass hỗ trợ biến, nhưng chúng vẫn còn có một số hạn chế mà mình sẽ thảo luận trong phần này.

Bạn không thể cập nhật các biến trong preprocessor dựa trên Media Query. Để làm cho một trang web có tính đáp ứng, bạn cần phải thay đổi các giá trị dựa trên kích thước màn hình. Các biến của preprocessor không thể làm được điều đó. Ví dụ, hãy xem xét các code sau đây:

Nó sẽ biên dịch thành:

Như bạn có thể thấy, sự chỉ định bên trong Media Query hoàn toàn bị bỏ qua. Mặt khác, các biến CSS sẽ lưu ý đến nhiệm vụ này trong một Media Query.

Tương tự, các biến trong preprocessor không nối tiếp hoặc không kế thừa. Sử dụng biến gốc, bạn có thể loại bỏ hết những hạn chế này. Một lợi thế quan trọng của việc sử dụng các biến gốc là chúng tương thích. Không giống như các biến trong Sass, mà sẽ chỉ làm việc với Sass, các biến gốc sẽ hoạt động không chỉ với preprocessor mà còn trong các tập tin thuần CSS.

Cú pháp và Sử dụng

Các bạn lưu ý, tất cả biến trong css khi khai báo đều cần có hai dấu gạch ngang “–” ở phía trước .
Khi lấy giá trị của biến ra thì các bạn dùng cấu trúc “var(tên biến)”.

Ví dụ tổng quan

Chúng ta sẽ làm ví dụ thông qua việc định nghĩa lại các thuộc tính trong Media Queries.

Trong ví dụ trên, các bạn cần lưu ý 2 vấn đề về cú pháp và ý nghĩa như sau:

  • Bất cứ khi nào bạn định nghĩa một thuộc tính tuỳ biến, bạn bắt đầu bằng cách xác định phạm vi của nó. Phạm vi xác định các nút DOM mà thuộc tính tuỳ biến hiện hữu. Sử dụng :root nói lên rằng thuộc tính tuỳ biến là hiện hữu cho tất cả các phần tử. Hãy nhớ rằng tất cả các thuộc tính tùy biến phải bắt đầu với hai dấu gạch ngang.
  • Nếu bạn có ý định sử dụng một thuộc tính tuỳ biến, bạn sẽ phải tham chiếu nó với hàm var(). Hàm này nhận hai đối số; đầu tiên là thuộc tính tùy biến, và thứ hai là một giá trị dự phòng. Giá trị dự phòng được sử dụng khi một thuộc tính tùy biến không được định nghĩa trên bất kỳ phần tử cha hoặc nếu giá trị của nó không hợp lệ.

Kết luận

Qua những lợi ích và ví dụ trên chúng ta cũng đã thấy rằng CSS Variables sẽ là tương lai, sẽ là thứ thay thế dần dần cho CSS preprocessor variables và làm cho CSS ngày càng power hơn bao giờ hết.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây