Sass @import و Partials

Sass می‌تواند کد CSS را خشک نگه دارد (DRY،Don't Repeat Yourself، خودداری از تکرار).

یک روش برای نوشتن کد DRY این است که کد‌های مرتبط را در فایل‌های جداگانه ذخیره کنید.

شما می‌توانید فایل‌های کوچک از طریق CSS بخش ایجاد کنید و آنها را در فایل‌های Sass دیگر شامل کنید. به عنوان مثال، این فایل‌ها می‌تواند شامل: فایل‌های بازسازی، متغیرها، رنگ‌ها، فونت‌ها و غیره باشد.

ورود فایل‌های Sass پشتیبانی می‌کند

مانند CSS، Sass نیز از @import دستور.

@import دستور به شما اجازه می‌دهد محتوای یک فایل را در یک فایل دیگر شامل کنید.

به دلیل مشکلات عملکردی، CSS @import دستور یک عیب اصلی دارد؛ هر بار که آن را فراخوانی می‌کنید، یک درخواست HTTP اضافی ایجاد می‌شود. اما، Sass @import دستور فایل‌ها را در CSS شامل می‌کند؛ بنابراین در زمان اجرا نیازی به فراخوانی اضافی HTTP نیست!

نحوه وارد کردن Sass:

@import filename;

توضیح:شما نیازی به指定 پسوند فایل ندارید، Sass به طور خودکار فرض می‌کند که شما به فایل‌های .sass یا .scss اشاره می‌کنید. شما همچنین می‌توانید فایل‌های CSS را وارد کنید.@import دستور وارد کردن فایل، سپس می‌توانید هر متغیری یا mixin که در فایل وارد شده تعریف شده است را در فایل اصلی استفاده کنید.

شما می‌توانید هر تعداد فایل را در فایل اصلی وارد کنید:

مثال

@import "variables";
@import "colors";
@import "reset";

بیایید به یک مثال نگاه کنیم: فرض کنید ما یک فایل به نام "reset.scss" داریم که به این صورت است:

زبان برنامه‌نویسی SCSS (reset.scss):

html,
body,
ul,
ol {
  مجعد: 0;
  پادینگ: 0;
}

حالا ما می‌خواهیم فایل "reset.scss" را به یک فایل به نام "standard.scss" وارد کنیم.

ما این‌گونه عمل می‌کنیم: معمولاً در بالای فایل اضافه می‌کنیم @import دستور؛ بنابراین محتوای آن دارای دامنه جهانی خواهد بود:

زبان برنامه‌نویسی SCSS (standard.scss):

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  رنگ: قرمز;
}

بنابراین، وقتی فایل "standard.css" ترجمه می‌شود، CSS به صورت زیر خواهد بود:

خروجی CSS:

html, body, ul, ol {
  مجعد: 0;
  پادینگ: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  رنگ: قرمز;
}

Sass Partials (فایل‌های محلی)

مقصد پیش‌فرض، Sass مستقیماً همه فایل‌های .scss را ترجمه می‌کند. اما، هنگام وارد کردن فایل‌ها، شما نیازی به ترجمه مستقیم ندارید.

Sass یک مکانیزم دارد: اگر نام فایل با زیرخط شروع شود، Sass آن را ترجمه نمی‌کند. فایل‌هایی که به این شکل نام‌گذاری می‌شوند در Sass به عنوان partials شناخته می‌شوند.

بنابراین، فایل‌های partial Sass با استفاده از نام‌گذاری پیشوند زیرخط استفاده می‌شوند:

زبان Sass Partial:

_filename;

مثال زیر یک فایل partial Sass به نام "_colors.scss" را نشان می‌دهد. (این فایل مستقیماً به "colors.css" تبدیل نمی‌شود):

مثال

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

حالا، اگر شما این فایل partial را وارد کنید، زیرخط را حذف کنید. Sass فکر می‌کند که باید فایل "_colors.scss" را وارد کند:

مثال

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  رنگ: $myBlue;
}