سی‌اس‌اس/import

متغیرها

import

ملاحظات سئو

import

دستور ‎@import‎ در CSS برای وارد کردن فایل‌های CSS دیگر به درون یک فایل اصلی استفاده می‌شود. این روش به طراحان اجازه می‌دهد که استایل‌های مختلف را به فایل‌های جدا تقسیم کنند و آن‌ها را به صورت ماژولار مدیریت نمایند.

سینتکس پایه

دستور ‎@import‎ در ابتدای فایل CSS و قبل از هر دستور دیگری (مانند سلکتورها) نوشته می‌شود:

@import url("reset.css");
@import "theme.css";

توضیح اجزاء

url("...") یا بدون آن، آدرس فایل CSS را مشخص می‌کند.
می‌توان چندین فایل را به صورت زنجیره‌ای ایمپورت کرد.
باید قبل از هر قانون CSS دیگر قرار گیرد؛ در غیر این صورت نادیده گرفته می‌شود یا باعث خطا می‌شود.

کاربردهای رایج

ماژولار کردن استایل‌ها (مثلاً تفکیک فایل‌های reset، layout، colors، components)
استفاده از استایل‌های آماده (مانند فونت‌ها یا کتابخانه‌های طراحی)
بارگذاری استایل‌های تم یا زبان خاص

مثال

@import "fonts.css";
@import "dark-theme.css";

body {
  font-family: var(--main-font);
  background-color: var(--bg-color);
}

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

می‌توان استایل‌ها را فقط در شرایط خاص بارگذاری کرد:

@import url("mobile.css") screen and (max-width: 600px);

تفاوت با link در HTML

ویژگی	@import در CSS	link در HTML
محل استفاده	در فایل CSS	در تگ head
زمان بارگذاری	بعد از بارگذاری فایل اصلی	هم‌زمان با HTML
تأثیر بر سرعت	کندتر به دلیل تاخیر در بارگذاری	سریع‌تر
قابلیت استفاده از مدیا کوئری	بله ✅	بله ✅

نکات مهم

برای بهترین عملکرد، استفاده از تگ `<link>` در HTML به جای ‎@import‎ توصیه می‌شود، مخصوصاً در پروژه‌های بزرگ یا تولیدی.
استفاده بیش از حد از ‎@import‎ می‌تواند زمان بارگذاری صفحه را افزایش دهد.
ترتیب import اهمیت دارد؛ فایل‌های بعدی می‌توانند فایل‌های قبلی را بازنویسی کنند.

تمرین پیشنهادی

فایلی با نام main.css بساز و در آن چند فایل مانند reset.css، typography.css و colors.css را ایمپورت کن. سپس در index.html فقط main.css را لود کن تا ساختار ماژولار را تجربه کنی.

بهینه‌سازی و سئو

استفاده از @import در فایل‌های تولیدی می‌تواند به کندی بارگذاری بیانجامد؛ در نتیجه بر تجربه کاربر و در نتیجه سئو اثر منفی دارد.
برای بهینه‌سازی نهایی، همه فایل‌ها را با ابزارهایی مانند PostCSS یا Sass به یک فایل واحد تبدیل و به کمک `<link>` بارگذاری کنید.
استفاده از Media Query در ‎@import‎ برای بارگذاری هدفمند استایل‌ها به کاهش بار مرورگر و بهبود SEO کمک می‌کند.

پشتیبانی مرورگرها

مرورگر	پشتیبانی از ‎@import‎
Chrome	بله ✅
Firefox	بله ✅
Safari	بله ✅
Edge	بله ✅
Internet Explorer	بله ✅ (اما قدیمی‌ترین نسخه‌ها ممکن است مشکلاتی داشته باشند)

منابع و پیوندهای مرتبط

جمع‌بندی

دستور ‎@import‎ روشی ساده برای وارد کردن فایل‌های CSS دیگر است. با این حال، در پروژه‌های بزرگ و برای عملکرد بهتر، استفاده از <link> همراه با ابزارهای ترکیب فایل توصیه می‌شود. درک درست و استفاده به‌جا از ‎@import‎ به سازمان‌دهی بهتر و انعطاف‌پذیری طراحی شما کمک می‌کند.