Tạo biến CSS 🔒 Chạy ngay trong trình duyệt — không tải lên bất cứ thứ gì.

Về công cụ này

Thuộc tính tùy chỉnh CSS — thường gọi là biến CSS — cho phép bạn định nghĩa một giá trị một lần, chẳng hạn màu thương hiệu, đơn vị khoảng cách hay font chữ, rồi tái sử dụng ở mọi nơi bằng var(--name). Việc tập trung các giá trị lặp lại nghĩa là chỉ cần sửa một lần ở cấp :root là lan tỏa ra toàn bộ stylesheet, thay vì phải tìm-và-thay ở hàng chục tệp; và vì thuộc tính tùy chỉnh là giá trị DOM sống, JavaScript hay media query có thể đọc và ghi lại chúng khi chạy — cho phép đổi giao diện tức thì, bật/tắt chế độ tối, hay khoảng cách tùy chỉnh theo người dùng mà không cần đụng vào CSS.

Nhập tên và giá trị cho mỗi dòng bên dưới; công cụ này tự động làm sạch mọi tên biến, loại bỏ tiền tố "--" thừa ở đầu và thay ký tự không hợp lệ bằng dấu gạch ngang, nên lỗi gõ như quên tiền tố hay thừa khoảng trắng sẽ không bao giờ làm hỏng khối được tạo ra. Sao chép kết quả :root { ... } thẳng vào stylesheet của bạn, hoặc tải xuống dưới dạng tệp .css riêng để @import ở bất cứ đâu cần. Mọi thứ chạy cục bộ trong trình duyệt của bạn khi bạn gõ; không có gì được tải lên.

Câu hỏi thường gặp