درج @import و Partials در Sass

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

یکی از روش‌های نوشتن کد DRY (Don't Repeat Yourself، نه تکرار کنید) این است که کد‌های مرتبط را در فایل‌های جداگانه ذخیره کنید.

می‌توانید از قطعات 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;
}