ToolHub
เปิดเครื่องมือ

เครื่องมือสร้างตัวแปร CSS

สร้าง CSS custom properties พร้อมดูตัวอย่างแบบภาพ สร้างตัวแปรสี ระยะห่าง และฟอนต์ ดูตัวอย่างแบบเรียลไทม์และส่งออกเป็น CSS

เครื่องมือสำหรับนักพัฒนา

เกี่ยวกับเครื่องมือนี้

เครื่องมือสร้างตัวแปร CSS ช่วยให้คุณสร้างและจัดการ CSS custom properties ผ่านตัวแก้ไขแบบภาพ มีเทมเพลตธีมสำเร็จรูป เช่น Light, Dark และ Blue ดูตัวอย่างระบบดีไซน์แบบเรียลไทม์ มีตัวเลือกสีอัตโนมัติสำหรับค่าสี และส่งออกเป็นไฟล์ CSS ในคลิกเดียว

คุณสมบัติหลัก

ดูตัวอย่าง

สถานการณ์การใช้งาน

css variables generator

คำถามที่พบบ่อย

มีเทมเพลตอะไรให้เลือกบ้าง?

เครื่องมือนี้มีเทมเพลตธีม Light, Dark และ Blue พร้อมตัวแปรสี ระยะห่าง ฟอนต์ และ border radius ที่ตั้งค่าไว้ล่วงหน้า คุณสามารถใช้เทมเพลต Custom เพื่อเริ่มต้นจากศูนย์ได้เช่นกัน

สามารถเพิ่มตัวแปรที่กำหนดเองได้หรือไม่?

ได้ คุณสามารถเพิ่มตัวแปรที่กำหนดเองได้ไม่จำกัดจำนวนผ่านปุ่มเพิ่มตัวแปร แต่ละตัวแปรมีช่องชื่อและค่า โดยค่าสีจะมีตัวเลือกสีและตัวอย่างสีโดยอัตโนมัติ

การดูตัวอย่างแบบเรียลไทม์ทำงานอย่างไร?

แผงดูตัวอย่างแบบเรียลไทม์แสดง UI ตัวอย่างที่เรนเดอร์ด้วยตัวแปร CSS ของคุณแบบเรียลไทม์ แสดงปุ่ม การ์ด และแถบสีที่มีสไตล์ด้วยตัวแปรของคุณ ทำให้คุณเห็นผลลัพธ์ของระบบดีไซน์ก่อนส่งออก

วิธีส่งออก CSS ที่สร้างขึ้น?

คุณสามารถคัดลอก CSS ที่สร้างขึ้นไปยังคลิปบอร์ดในคลิกเดียว หรือดาวน์โหลดเป็นไฟล์ .css ผลลัพธ์เป็นบล็อก :root มาตรฐานที่มี custom properties ทั้งหมด พร้อมใช้งานในโปรเจกต์ใดๆ ได้ทันที

สร้างตัวแปรประเภทใดได้บ้าง?

คุณสามารถสร้าง CSS custom properties ใดๆ ก็ได้ รวมถึงสี ค่าระยะห่าง ฟอนต์แฟมิลี ขนาดฟอนต์ border radius และอื่นๆ ค่าสีจะถูกตรวจจับโดยอัตโนมัติและมีตัวเลือกสีให้เลือก