Tìm hiểu về Biến trong CSS

Sử dụng biến trong CSS

Những website lớn thường sẽ sử dụng rất nhiều CSS với lượng lớn giá trị bị lặp lại. Giả sử khi bạn muốn sửa màu chủ đạo của website thì rất có khả năng bạn sẽ phải sửa ở rất nhiều vị trí ví dụ như button, navbar, title,.... Điều này gây ra rất nhiều khó khăn khi code cũng như khi bảo dưởng và duy trì website.

Để giải quyết vấn đề này chúng ta có thể sử dụng CSS pre-processing: SASS, LESS. Tuy nhiên, với cách này các bạn sẽ cần thêm 1 bước complile độc lập, đồng thời cần phải bỏ thời gian ra học và tìm hiểu về chúng và một điều rất quan trọng là các bạn sẽ không thể sử dụng javascript để update các giá trị css.

Trong bài viết này mình sẽ giới thiệu cho các bạn 1 cách đơn giản hơn đó là biến trong css không cần bước compile độc lập đồng thời các bạn hoàn toàn có thể thay đổi các giá trị css bằng javascript.

Tuy nhiên, có 1 lưu ý đây vẫn đang là tính năng thử nghiệm nên khi sử dụng các bạn cần lưu ý xem browser mà các bạn develope cho có hỗ trợ không. Các bạn có thể xem ở trang này:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility

Sử dụng

/* Khai báo biến */
element {
--spacing:10px;
}
/* Sử dụng biến */
element {
padding: var(--spacing);
}
view raw cssvariable1.css hosted with ❤ by GitHub

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ụ 1: Sử dụng javascript để thay đổi giá trị biến

<!DOCTYPE html>
<html>
<head>
<style>
body {
--main-color: red;
}
.red {
color: var(--main-color);
}
.red2 {
color: var(--main-color);
}
.red3 {
color: var(--main-color);
}
</style>
</head>
<body>
<h1 class="red">Red 1</h1>
<h1 class="red">Red 2</h1>
<h1 class="red">Red 3</h1>
</body>
</html>
view raw cssvariable.html hosted with ❤ by GitHub

Trong ví dụ trên, màu của tất cả phần tử class red đều được set theo biến --main-color. Khi bạn muốn đổi màu thì chỉ cần thay đổi giá trị của biến --main-color.

Bạn có thể thay đổi giá trị biến --main-color thành "blue" bằng javascript như sau:

document.querySelector('body').style.setProperty("--main-color",'blue');
view raw cssvariable.js hosted with ❤ by GitHub

Tính kế thừa của biến CSS

<style>
.parent {
--color: blue;
}
.child1 {
--color: green;
}
.child1 {
color:var(--color);
}
.child2 {
color:var(--color);
}
</style>
<body>
<div class="grand-parent">
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</div>
</body>
view raw cssvariable1.html hosted with ❤ by GitHub

Trong ví dụ trên:

  • Đối với class="child1": color = green mà không phải là blue do giá trị này được define trong class="child1"
  • Đối với class="child2": color=blue do thừa hưởng từ class="parent"
  • Đối với class="grand-parent": biến --color không tồn tại do biến này chỉ được define trong các phần tử con.

Giá trị mặc định

Các bạn có thể define giá trị mặc định khi mà biến không tồn tại như sau:

element {
color: var(--main-color, red); /* nếu --main-color không tồn tại thì trả về red */
}
element {
background-color: var(--main-color, --second-color, pink); /* trả về red nếu --main-color và --second-color không tồn tại */
}
view raw cssvariable4.css hosted with ❤ by GitHub

Cám ơn bạn đã đọc bài viết. Hãy kipalog nếu bài viết bổ ích với bạn. Nếu mình có nhầm lẫn hoặc bạn có ý kiến đóng góp, xin vui lòng comment ở bên dưới.

Nguồn tham khảo

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility

QuanCao 15-04-2017

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Quân Cao

4 bài viết.
31 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
23 2
Sử dụng data attribute trong HTML Hôm nay trong lúc làm chức năng mới cho hệ thống (Link), mình có dùng lại Data attribute trong HTML, tiện thể mìn...
Quân Cao viết hơn 1 năm trước
23 2
White
9 7
Javascript Closure Closure là một hàm (function), trong hàm đó có sử dụng những biến độc lập (là biến được sử dụng locally trong hàm nhưng lại đượ...
Quân Cao viết hơn 1 năm trước
9 7
White
8 2
Scope Trong javascript có 2 loại scopes: lexical scope và block scope Lexical scope là không gian biến được khai báo ở trong hàm (function). Từ kh...
Quân Cao viết hơn 1 năm trước
8 2
Bài viết liên quan
Male avatar
0 2
Chào mọi người, trong bài viết này chúng ta sẽ tìm hiểu cách (Link) 1 cách đơn giản dễ làm với HTML và Google Charts. Đầu tiên các bạn tạo 1 file ...
TungVuong viết 4 tháng trước
0 2
White
1 2
Do cơ chế render tuyệt vời của Grails mà chúng ta có thể khai báo sử dụng các biến ở các layout mà có thể thay đổi từ view được. Bí quyết nằm ở th...
Đỗ Danh Mạnh viết hơn 3 năm trước
1 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
31 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!