متغیرهای CSS

استفاده از متغیرهای CSS (Custom Properties) برای تم‌پذیری و قابلیت نگهداری

متغیرهای CSS چیست؟

متغیرهای CSS (Custom Properties) اجازه می‌دهند مقادیر را ذخیره و در سراسر پروژه استفاده مجدد کنید.

تعریف و استفاده

/* تعریف در :root — سراسری */
    :root {
        --primary-color: #3498db;
        --spacing: 1rem;
        --radius: 12px;
    }
    
    /* استفاده */
    .btn {
        background: var(--primary-color);
        padding: var(--spacing);
        border-radius: var(--radius);
    }

var() با مقدار پیش‌فرض

.box {
        color: var(--text-color, #333);  /* اگر متغیر نبود، #333 */
    }

مزایای متغیرها

مزیتتوضیح
تم‌پذیریتغییر یک خط، کل پروژه
کاهش تکراریک تعریف، چندین استفاده
دینامیکبا JavaScript قابل تغییر
وارثتیاز والد به فرزند
مدیا کوئریدر breakpoint‌ها قابل تغییر

سیستم طراحی با متغیرها

:root {
        /* رنگ‌ها */
        --color-primary: #3498db;
        --color-secondary: #2ecc71;
        --color-danger: #e74c3c;
        --color-dark: #2c3e50;
        --color-light: #ecf0f1;
        --color-text: #333;
        --color-bg: #fff;
    
        /* فاصله‌ها */
        --space-xs: 0.5rem;
        --space-sm: 1rem;
        --space-md: 1.5rem;
        --space-lg: 2rem;
        --space-xl: 3rem;
    
        /* فونت */
        --font-main: "Vazirmatn", Tahoma, sans-serif;
        --font-size: 16px;
    
        /* سایر */
        --radius: 12px;
        --shadow: 0 4px 12px rgba(0,0,0,0.1);
        --transition: 0.3s ease;
    }

تم تاریک با متغیرها

/* تم روشن */
    :root {
        --bg: #ffffff;
        --text: #333333;
    }
    
    /* تم تاریک */
    [data-theme="dark"] {
        --bg: #1a1a2e;
        --text: #ecf0f1;
    }
    
    body {
        background: var(--bg);
        color: var(--text);
    }

مدیا کوئری با متغیرها

:root {
        --container-width: 1200px;
    }
    
    @media (max-width: 768px) {
        :root {
            --container-width: 100%;
        }
    }

JavaScript و متغیرها

// خواندن
    const color = getComputedStyle(el).getPropertyValue("--primary");
    
    // تنظیم
    el.style.setProperty("--primary", "#e74c3c");

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط