CSS Variables là gì? cách sử dụng hiệu quả CSS Variables

CSS Variables là gì?

CSS Variables là các giá trị do chúng ta định nghĩa, nó có thể được sử dụng lại ở bất kì đâu nếu chúng ta muốn.

Để làm việc hiệu quả với CSS Variables thì hôm nay mình xin chia sẻ lại một số tip cho các bạn đang tìm hiểu nhé.

Primary variables và Secondary variables

Đầu tiên chúng ta sẽ chia ra 2 loại đó là Primary variables và Secondary variables.

Primary variables

Đây là các biến chúng ta có thể sẽ muốn update lại giá trị cho nó sau này. Ví dụ như khi responsive, khi sử dụng :hover hay :focus.

Ví dụ:

:root {
  --container: 1200px;
	--margin: 15px;
}

Secondary variables

Đây là các biến tính toán sử dụng giá trị các biến khác. Ví dụ mình sử dụng các biến trên vào việc chia các cột flexbox. Bây giờ mình muốn có 3 post trên một row thì mình sẽ làm như sau:

:root {
  --container: 1200px;
	--margin: 15px;

  --s-width-post: calc(1200px / 3 - 2*15);
}

Khi làm việc nhóm, bạn có thể đặt một ký hiệu giúp nhận biết rằng đây là biến không sửa theo cách thủ công, chẳng hạn như --s-width-post (s viết tắt cho secondary) hoặc tùy theo ý của các bạn.

Scope

Thông thường chúng ta hay tạo các biến và thêm chúng vào :root như ví dụ dưới đây:

:root {
 --header-color: blue;
 --footer-color: black;
}

Tất nhiên điều này sẽ giúp cho chúng ta dễ dàng quản lí các biến. Tuy nhiên thì có một vấn đề là tại sao chúng ta lại thêm --header-color vào :root trong khi đó đây là biến mà ta sẽ sử dụng cho header mà không ở bất kì chỗ nào khác ^^.

Có một cách hay hơn là chúng ta nên đặt biến này vào selector chẳng hạn như:

.header {
  --header-color: blue;
}

fallback values

Khi sử dụng fallback values chúng ta có thể set default cho biến. Ví dụ dưới đây mình set default value cho biến --bg là red tức là nếu chưa có biến này thì giá trị red sẽ được set.

Removing duplicate code

Mình có một ví dụ như sau:

.btn {
  border: 1px solid black;
}
.btn:hover {
  background: blue;
}
.btn.border-red {
  border-color: red;
}
.btn.border-red:hover {
  background: red;
}

Ở ví dụ trên ta có thể thấy được có một vài chỗ ta sử dụng cùng một giá trị red. Ta có thể fix lại như sau:

.btn {
	border: 1px solid var(--color, black);
}
.btn:hover {
	background: var(--color, black);
}
.btn.border-red {
	--color: red;
}

Capitalization

Các biến này phân biệt chữ hoa với chữ thường.

Ví dụ:

:root {
 --color: blue;
 --COLOR: red;
 // color và COLOR khác nhau
}

Như vậy là mình đã giới thiệu cho các bạn một số cách để chúng ta sử dụng hiệu quả CSS Variables. Chúc các bạn học tập hiệu quả và hẹn các bạn trong các bài viết tiếp theo ^^.