CSS Variables ทำให้ Styles โดยรวมเป็น theme เดียวกัน ทำให้เป็น design system

ประโยชน์ของ CSS Variables

เราใช้ CSS Property ต่างๆได้ แต่ถ้าเมื่อไหร่ที่ต้องการทำให้ Styles ให้ระบบเป็น Design System เดียวกัน เป็น Theme เดียวกัน ควรใช้ CSS Variables

CSS Variables ที่ควรประกาศได้เรียกว่า Design Tokens ซึ่งได้แก่ color, padding, gap, typography, sizing, border-radius, etc.

ประกาศ CSS Variables

ส่วนใหญ่ประกาศที่ :root หรือที่เรียกว่า Global Scope

index.css

:root {
	/* Colors */
	--primary-color: #007bff;
	--secondary-color: #6c757d;
	--success-color: #28a745;

	/* Font sizes */
	--font-small: 0.875rem;
	--font-normal: 1rem;
	--font-large: 1.25rem;

	/* Spacing */
	--spacing-small: 0.5rem;
	--spacing-medium: 1rem;
	--spacing-large: 2rem;
}

ใช้งาน Variables

ใช้ var() function

button.css

.button {
	background-color: var(--primary-color);
	padding: var(--spacing-small) var(--spacing-medium);
	font-size: var(--font-normal);
}