hướng dẫn sử dụng biến trong css variables

Hướng dẫn sử dụng biến trong CSS (CSS Variables)7 phút đọc

Nhắc đến sử dụng biến trong CSS chắc nhiều bạn sẽ nghĩ ngay đến SASS phải không nào ? Bản thân mình trước đây cũng vậy khi sử dụng SASS được một thời gian rồi thì mới nhận ra rằng bản thân CSS cũng hỗ trợ sử dụng biến (CSS variables).

Đây là một kĩ thuật mới xuất hiện kể từ khi CSS3 ra đời và còn chưa phổ biến trong giới lập trình website vì một số trình duyệt chưa hỗ trợ sử dụng biến trong CSS.Nhưng với sự phát triển vũ bão của công nghệ thông tin như hiện nay thì mình tin chỉ trong một thời gian ngắn nữa thôi bạn có thể sử dụng biến trong CSS trên tất cả các trình duyệt.

Bài viết này sẽ bao gồm tất cả những kiến thức cơ bản về biến trong CSS cũng như cách sử dụng và các ví dụ cụ thể để các bạn đọc xong là làm được luôn.Hãy cùng mình tìm hiểu ngay bây giờ nhé.

Bạn hãy nhấn vào ảnh bất kì trong bài viết để xem nó ở chế độ mở rộng (Lightbox)

Vì sao nên sử dụng biến trong CSS

Nếu bạn nào có học qua các ngôn ngữ lập trình như Javascript, PHP,..vv chắc sẽ biết rõ lợi ích khi sử dụng biến.Chỉ bằng cách khai báo biến và gán cho nó một giá trị nào đó là chúng ta có thể sử dụng nó nhiều lần ở bất kì vị trí nào chúng ta muốn.

Và khi sử dụng biến trong CSS mình nhận thấy có những lợi ích sau :

  • Thay vì phải ghi nhớ giá trị của thuộc tính nào đó giờ chúng ta chỉ việc nhớ tên biến mà ta đã gán giá trị của thuộc tính cho nó.Tốc độ viết code của bạn sẽ được cải thiện đáng kể.
  • Dễ dàng thay đổi toàn bộ giá trị của thuộc tính bất kì trong website chỉ bằng cách thay đổi giá trị của biến.Code bạn viết ra sẽ rất linh hoạt và dễ bảo trì thay đổi khi cần thiết.
  • Bạn có thể làm việc nhóm nhiều người mà không lo rằng sẽ bị xáo trộn các thành phần cơ bản của code.Tiết kiệm thời gian cho bản thân và nhóm của bạn.

Qua đây chắc bạn đã hiểu được tầm quan trọng của việc sử dụng biến trong CSS rồi.Tiếp theo chúng ta sẽ tìm hiểu cách dùng CSS Variables thông qua các ví dụ cụ thể.

Cách sử dụng biến trong CSS (CSS variables)

Khai báo biến trong CSS

Để khai báo một biến thì cú pháp sẽ là :

Trước tên biến phải là hai dấu và tên biến tùy ý bạn đặt sao cho dễ hiểu là được.Ngăn cách giữa biến và giá trị của biến là dấu : , giá trị của biến có thể là đơn vị độ dài, màu sắc, vị trí …vv.

Cách khai báo biến trong CSS phổ biến nhất là khai báo bên trong :root.Ý nghĩa của :root nghĩa là phần tử gốc cao nhất trong tập tin, do đó khi bạn khai báo biến trong này thì biến của bạn tương đương với biến toàn cục.

Nói một cách đơn giản là biến của bạn có thể sử dụng bất cứ đâu trong tài liệu miễn là bạn khai báo đúng cú pháp và tên biến.Bạn có thể xem như ví dụ dưới đây mình có khai báo ba biến toàn cục với giá trị khác nhau để bạn dễ hình dung.

Ngoài khai báo biến toàn cục trong :root như trên thì bạn cũng có thể khai báo biến cục bộ ngay trong class hay id.Bạn lưu ý là biến cục bộ sẽ mạnh hơn biến toàn cục nên nó sẽ là giá trị được áp dụng cho thuộc tính.

Như ở ví dụ trên thì mình có khai báo một biến cục bộ có tên giống với tên biến toàn cục (–primary-color) chỉ khác nhau ở giá trị biến mà thôi.Kết quả là thuộc tính background-color sẽ nhận giá trị của biến cục bộ là màu blue.

Gọi biến trong CSS

Để gọi biến trong CSS ra và sử dụng cũng rất đơn giản.Cú pháp gọi một biến trong CSS sẽ như sau :

Ngay sau tên thuộc tính CSS là tên biến được bọc trong var().Để dễ hiểu thì bạn hãy xem qua ví dụ dưới đây nhé.

Mình có khai báo một biến toàn cục có tên là –main-gutter và gán cho nó giá trị là 30px.Mình muốn áp dụng giá trị 30px này cho thuộc tính margin trong class .box nên mình sẽ gọi biến này ra như ở ví dụ trên.

Cách import biến CSS

Trong một dự án lớn sẽ tồn tại rất nhiều file CSS riêng lẻ và do nhiều người phụ trách do đó nếu bạn khai báo tất cả biến vào chung với một file nào đó thì sau này sẽ khó quản lý.Để giải quyết vấn đề này thì bạn nên tạo ra một file chuyên để khai báo biến.

Sau đó import file đó vào những file mà bạn sẽ sử dụng biến.Lần này mình sẽ lấy ví  dụ trước rồi mới giải thích cho các bạn sau.

_variables.css

Mình tạo ra một file có tên _variables.css và nhập vào đó tất cả những biến mà mình sẽ sử dụng trong dự án như ví dụ trên đây.

style.css

Giờ mình sẽ kéo giá trị biến trong file _variables.css vào trong file style.css để sử dụng.Cách kéo file bên ngoài vào cũng không có gì khó cả.Bạn sử dụng lệnh sau :

Bằng cách này bạn có thể tạo ra những file con và dẫn chúng vào file mẹ.

Trình duyệt hỗ trợ

sử dụng biến trong css variables

Bạn có thể thấy rằng số lượng các trình duyệt  phổ biến hỗ trợ CSS variables lên đến 93.37% (thời điểm ngày 9-2-2020).Nhưng có một số trình duyệt như IE hay Opera Mini thì vẫn chưa hỗ trợ.Do đó bạn nên xác định yêu cầu của khách hàng (đáp ứng IE hay không) trước khi quyết định sử dụng biến trong CSS.

Cách an toàn nhất để sử dụng biến trong CSS mà không lo ngại vấn đề trình duyệt hỗ trợ đó là bạn nên học SASS ngay.Mình đã có một chuỗi bài viết hướng dẫn sử dụng SASS trên blog.Mình sẽ để link ngay dưới đây để bạn tham khảo.

Kết luận

Bài viết này đã khá dài rồi nên phần những ví dụ thực tế về sử dụng biến trong CSS mình sẽ tiếp tục chia sẻ đến các bạn trong một bài viết khác.Với bài viết này mình hi vọng bạn có có thêm kiến thức về CSS variables.

Đến lượt bạn

Để nhanh chóng thành thạo và nắm vững các kiến thức trong bài viết bạn nên thực hành ngay khi có thời gian rảnh.Bạn có thể tham khảo gợi ý dưới đây.

  • Tạo ra biến toàn cục và biến cục bộ trong css
  • Gọi và sử dụng biến đó
  • Tạo file riêng chứa biến rồi dẫn file đó vào trong file chính để sử dụng
Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x