Giới thiệu và sử dụng CSS Variables

Khi nói tới biến(Variables) trong CSS chắc hẳn nhiều người sẽ nghĩ tới SASS/SCSS. Nhưng không, ở đây mình đang nói tới biến trong CSS (#CSS variables), CSS đã hỗ trợ điều này. Không cần bộ tiền xử lý và không cần biên dịch nữa 🥳

Giới thiệu và sử dụng CSS Variables
Giới thiệu và sử dụng CSS Variables

Phạm vi toàn cầu sẽ cho phép bạn truy cập biến ở mọi nơi. Phạm vi địa phương sẽ chỉ nằm trong CSS selector cụ thể của bạn 👍

Trùng lặp mã CSS

Trước đây, tôi nhớ mình đã phải tạo rất nhiều CSS trùng lặp…

Điều này làm cho tôi rất khó chịu khi phải viết nhiều CSS trùng lặp như vậy!

SASS là một giải pháp

Và sau đó tôi phát hiện ra Sass. Và cuối cùng tôi có thể sử dụng các biến!

Tất cả đều tuyệt vời. Nhưng sau đó, bạn phải đối phó với việc cài đặt Sass vào dự án của mình, bạn cần phải config với bộ xử lý và biên dịch của nó trước khi nó cỏ thể hoạt động.

Và đối với một dự án nhỏ, sử dụng SASS có vẻ không cần thiết lắm 😅

CSS là người hùng của tôi 💪

Quay lại với biến trong CSS. Bây giờ tôi có thể đặt một biến nguyên bản. Không có bộ xử lý trước, không cần cài đặt thêm, chỉ cần CSS đơn giản.

Cú pháp biến CSS (CSS Variable Syntax)

1. Khai báo một biến CSS

Bạn đặt trước tên biến của mình bằng 2 dấu gạch ngang --

--variable-name: some-value;

2. Sử dụng biến CSS

Và để sử dụng nó. Bạn sử dụng chuyển tên biến của mình vào var()

css-property: var(--variable-name);

Phạm vi trong Biến CSS

Bạn có thể khai báo biến CSS của mình trong phạm vi toàn cầu, nghĩa là nó có thể có sẵn trong toàn bộ ứng dụng của bạn. Hoặc bạn có thể chỉ đặt biến CSS trong phạm vi cục bộ, nơi nó chỉ khả dụng trong bộ chọn cụ thể.

Phạm vi toàn cầu

Để khai báo nó trong phạm vi toàn cục, trước tiên bạn đặt định nghĩa của mình bên trong :root{}

Phạm vi địa phương

Để khai báo nó trong phạm vi cục bộ, bạn chỉ cần xác định biến bên trong khối phần tử của mình. Và biến đó chỉ có sẵn trong bộ chọn đó. Nếu bạn đã cố gắng sử dụng ở đâu đó, nó sẽ không có tác dụng.

Ghi đè giá trị biến CSS

Điều tuyệt vời là bạn có thể ghi đè giá trị global, do đó có thể đặt một cái gì đó duy nhất cho một ngữ cảnh cụ thể.

Đặt giá trị dự phòng (Fallback Value)

Điều gì xảy ra khi bạn sử dụng một biến chưa bao giờ được chỉ định 🤔

Câu trả lời là KHÔNG CÓ GÌ XẢY RA. Ứng dụng của bạn không bị lỗi, chỉ là nó không nhận CSS Variable --color đó thôi .

Tôi đoán điều đó thật tuyệt. Nhưng nếu điều đó có vẻ hơi rủi ro, bạn có thể đặt Giá trị dự phòng.

Và nếu bạn xác định nó, màu đã xác định sẽ hiển thị.

Sử dụng biến CSS trong JavaScript

Điều tốt nhất khi sử dụng biến CSS thay vì biến Sass là bạn có thể truy cập nó bằng JavaScript! Và bạn biết đấy khi JS tham gia bữa tiệc, mọi thứ sẽ trở nên điên cuồng.

Hãy xem qua cách sử dụng khái niệm cơ bản và xem cách chúng tôi có thể truy xuất và đặt các biến CSS của mình.

Lấy từ kiểu nội tuyến (inline style CSS)

Nếu bạn đặt biến CSS của mình thông qua kiểu nội tuyến.

Bạn sẽ truy xuất giá trị của mình bằng getPropertyValue()

Lấy từ style tag hoặc CSS file (inline style CSS)

Nếu bạn đặt biến CSS của mình trong thẻ style hoặc tệp CSS bên ngoài.

Bạn cần sử dụng cái này trước tiên getComputedStyle()

Bạn cũng có thể sử dụng cách này để truy xuất kiểu inline style của bạn.

Đặt một biến CSS với JS

Ví dụ đơn giản

Hãy tập hợp mọi thứ lại với nhau và xem một ví dụ đơn giản. Ở đây tôi muốn đổi màu văn bản khi được nhấp vào.

This is demo. Let click me!

Browser Support

Ngoài Internet Explorer thì tất cả các trình duyệt khác đều hỗ trợ CSS Variables.

Browser Support: CSS Variables

Trên đây là bài viết giới thiệu và sử dụng CSS Variables. Cảm ơn vì đã đọc ❤

Cách xóa một item khỏi Array trong JavaScript Cách cài đặt MongoDB trên Ubuntu 18.04 Thêm Form tính giá sản phẩm trong Woocommerce WordPress BroadcastChannel API: Giao tiếp giữa các tab hoặc cửa sổ trong trình duyệt Hướng dẫn deploy project Nuxt JS lên VPS 😍 Giới thiệu PM2 – Trình quản lý các ứng dụng NodeJS Thêm meta tags cho website Nuxt JS Tạo Blog đơn giản với Nuxt JS và WordPress API Cài đặt Git trên Ubuntu 18.04 Hướng dẫn cài đặt Node.js trên VPS Ubuntu 18.04

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to whitelist website on AdBlocker?

How to whitelist website on AdBlocker?

  1. 1 Click on the AdBlock Plus icon on the top right corner of your browser
  2. 2 Click on "Enabled on this site" from the AdBlock Plus option
  3. 3 Refresh the page and start browsing the site