Gốc var css

Chắc chắn các bạn khi nghe về cách sử dụng biến trong CSS sẽ nghĩ ngay đến các CSS Preprocessor như SASS hay LESS. Hoặc nếu không thì cũng suy nghĩ sử dụng biến trong CSS làm sao mà được nhỉ?

Nội dung chính Show

# Tại sao nên sử dụng biến
# Khai báo và sử dụng biến trong CSS
# Khai báo biến cục bộ
# Responsive with variable
# Hỗ trợ trình duyệt
# Sử dụng biến với @supports
# Lời kết

Sau một thời gian sử dụng biến với SASS mình có dự án và nghiên cứu tài liệu trong CSS thuần có thể sử dụng biến không nhỉ mà không cần thiết phải sử dụng SASS hay LESS

Nếu được như thế thì tiện lắm, các bạn mới học chưa biết cách sử dụng SASS hay LESS thì có thể học cách sử dụng biến trong CSS để làm quen trước sau này vào làm với SASS hay LESS đỡ bỡ ngỡ khi sử dụng biến

Vì thế hôm nay mình xin chia sẻ những kiến thức về biến trong CSS để các bạn có thể hiểu nó như thế nào, cách dùng ra sao nhé

# Tại sao nên sử dụng biến

Có rất nhiều lý do để sử dụng biến trong CSS. Nhưng theo bản thân mình thấy thì khi sử dụng biến số thì lượng mã bị lặp lại bị hạn chế và dễ dàng tùy chỉnh. Chỉ cần sử dụng biến và thay đổi giá trị biến thì tất cả các thành phần sử dụng biến đều thay đổi theo

Khi chắc chắn rằng bạn sẽ gặp các trường hợp như thế này. Cả 3 phần tử này đều sử dụng chung 1 mã màu, tạo mã bị lặp lại

.title {
  color: #ffa400;
}
.author-text {
  color: #ffa400;
}
.box-description {
  background-color: #ffa400;
}

Vì thế khi sử dụng biến thì mọi thứ trở nên dễ đọc hơn và dễ chỉnh sửa hơn.
______1

# Khai báo và sử dụng biến trong CSS

Cách khai báo cũng đơn giản thôi các bạn sử dụng theo cú pháp này.

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

7. Tên biến bắt buộc phải bắt đầu bằng

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

8 nhá. Ví dụ

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

Thường thường khi dùng biến trong CSS mình hay khai báo biến trong

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

1(thẻ ) tức là ở vị trí cao nhất, để các thành phần trong trang có thể kế thừa từ nó. Tại sao để trong thẻ vì thẻ là phần tử cao nhất, các thành phần trong trang đều là phần tử con của thẻ .

:root{
  --ten-bien: gia tri;
  --background-main-color: #ffa400;
}

Cách sử dụng cũng đơn giản nốt theo cú pháp sau.

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

.box {
  background-color: var(--background-main-color);
}

Các bạn có thể xem demo ở Codepen này.

Xem Biến CSS Pen của EvonDev (@blackzero) trên CodePen

# Khai báo biến cục bộ

Có nghĩa là khi code các bạn có thể kế thừa từ thẻ để sử dụng các biến từ nó. Tuy nhiên các bạn cũng có thể set riêng cho chính phần tử mà các bạn đang làm hoặc phần tử cha bọc nó. Để mình ví dụ cho các bạn dễ hiểu.

:root {
  --red: red;
}
.other-box {
  background-color: var(--red);
}

Giờ ở thẻ

Tuy nhiên nếu mình muốn set biến cho chính cái box đó riêng mà không cần phải sử dụng từ thẻ có được không ? Xin thưa các bạn là được nha. Các bạn có thể sử dụng như này

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

4
Lúc này biến mà

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

5 có lớp

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

6 sử dụng là

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

3 của chính nó chứ không phải của thẻ

Nếu nó hoặc phần tử cha chứa nó không có thuộc tính
:root{
  --ten-bien: gia tri;
  --background-main-color: #ffa400;
}
3 thì nó cứ lấy ra ngoài cho đến khi tới thẻ .

At here biến cũng thế. It also priority from in outside. Vì thế nên giờ cái

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

6 sẽ có màu hồng

Xem Biến CSS bút #2 của EvonDev (@blackzero) trên CodePen

# Responsive with variable

Ở bài trước mình có nói về nên sử dụng đơn vị em hay rem vào dự án rồi chia sẻ cách dùng

:root{
  --ten-bien: gia tri;
  --background-main-color: #ffa400;
}

5 tính toán 62.5% ở thẻ .

Nếu các bạn làm mà không sử dụng

:root{
  --ten-bien: gia tri;
  --background-main-color: #ffa400;
}

2 hay

:root{
  --ten-bien: gia tri;
  --background-main-color: #ffa400;
}

5 hay

:root{
  --ten-bien: gia tri;
  --background-main-color: #ffa400;
}

8 mà chỉ sử dụng

:root{
  --ten-bien: gia tri;
  --background-main-color: #ffa400;
}

9 thì các bạn có thể dễ dàng đáp ứng với các biến như thế này. Các bạn có thể áp dụng tương tự với đơn vị

:root{
  --ten-bien: gia tri;
  --background-main-color: #ffa400;
}

2 và

:root{
  --ten-bien: gia tri;
  --background-main-color: #ffa400;
}

5 hay

:root{
  --ten-bien: gia tri;
  --background-main-color: #ffa400;
}

8 nha

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

9
Đó là điểm hay đó các bạn. Khi xuống màn hình, bạn mong muốn chỉ cần thay đổi giá trị của biến trở lại là mọi thứ sẽ thay đổi theo ý muốn của bạn. Tuyệt vời phải không nào.

Ảnh lấy từ CSS Tricks để demo

Vì vậy, so với CSS Preprocessors thì thế nào ?

# Hỗ trợ trình duyệt

Hiện tại, số lượng sử dụng CSS Variables toàn cầu là

.box {
  background-color: var(--background-main-color);
}

3. Hỗ trợ hầu hết trong các trình duyệt hiện đại nhưng không hỗ trợ đối với IE và Opera Mini. Các bạn cẩn thận khi làm việc với khách hàng hay công ty yêu cầu phải trả lời ứng dụng IE hay Opera Mini nhé.

# Sử dụng biến với @supports

Nếu các bạn thích sử dụng biến trong CSS quá mà lại sợ trúng IE hay Opera Mini thì toi network. Vì cách tốt nhất đó là sử dụng thuộc tính

.box {
  background-color: var(--background-main-color);
}

4 trong CSS để xử lý trường hợp trình duyệt không hỗ trợ biến trong CSS. Các bạn có thể tìm hiểu về thuộc tính

.box {
  background-color: var(--background-main-color);
}

4 tại đây

Sau khi các bạn đã tìm hiểu rồi thì chắc chắn các bạn cũng biết sơ lược về cách sử dụng. Mình sẽ áp dụng chúng vào bài viết này. Nếu máy bạn nào không có Opera Mini hay IE thì dùng giả lập test thử xem sao hoặc làm cho khách hàng dùng vài trình duyệt là biết kaka

:root {
  --yellow-color: #ffa400;
}
.title {
  color: var(--yellow-color);
}
.author-text {
  color: var(--yellow-color);
}
.box-description {
  background-color: var(--yellow-color);
}

3
Ở trên mình làm 1 ví dụ nhỏ là nếu trình duyệt hỗ trợ biến trong CSS bằng cách sử dụng

.box {
  background-color: var(--background-main-color);
}

6 thì thẻ

Các bạn có thể xem demo Codepen dưới đây. Nếu các bạn có trình duyệt IE hay Opera thì Test thử xem nó hiển thị đúng không nha. À Codepen chỉ chạy được từ IE 11 trở đi, nếu các bạn muốn Test ở IE 10 hay thấp hơn thì copy code về máy rồi chạy thử nha

Xem các biến css Pen @supports của EvonDev (@blackzero) trên CodePen

# Lời kết

Phù. Bài dài này cũng có thể là mình đã tìm được 2 bài nói về thuộc tính

.box {
  background-color: var(--background-main-color);
}

4 và sự khác nhau giữa các biến trong CSS nên với SASS hay LESS thì viết vào nữa chắc dài lắm

Ah trang web của mình có biến sử dụng đó các bạn. Các bạn có thể Inspect Code(F12) để coi nha. Do mình tập trung chủ yếu ở Việt Nam nên chắc hầu hết dùng Chrome và Firefox nên mình không dùng thuộc tính

.box {
  background-color: var(--background-main-color);
}

4 hihi

Hi vọng bài viết sẽ cung cấp thêm cho các bạn nhiều kiến thức mới để ngày càng giỏi hơn và làm việc tốt hơn nhé. Nếu các bạn có ý kiến gì hay, đóng góp ý kiến thì bình luận bên dưới giúp mình để mình có động lực viết bài tiếp nè. Chúc các bạn ngày làm việc năng động và tốt lành

programming css

Gốc var css

# Tại sao nên sử dụng biến

# Khai báo và sử dụng biến trong CSS

# Khai báo biến cục bộ

# Responsive with variable

# Hỗ trợ trình duyệt

# Sử dụng biến với @supports

# Lời kết

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội