دستور import و درون ریزی های Partial در Sass [ قسمت چهار ]

  • آخرین بروزرسانی در سه‌شنبه 17 نوامبر 2020

    Average rating 5 / 5. Vote count: 1

در زبان شیوه نویسی Sass اصل DRY یا Don’t Repeat Yourself رعایت می شود. این عبارت که به طور در برنامه نویسی با آن روبرو هستیم می گوید که نباید در کدنویسی کار تکراری انجام دهید. به همین منظور هم در Sass می توانید کد هایی که مدام لازمتان می شود را در فایل های جداگانه نگهدارید و با دستور import در هر فایلی که به آن ها نیاز دارید، وارد کنید. در قسمت چهارم از آموزش Sass به روش این کار می پردازیم.

شما می توانید تکه کد های پر کاربرد در Sass را در فایل های جداگانه ذخیره کنید و در هر فایلی که به آن ها نیاز دارید آن را import کنید.

نمونه ای از این فایل ها می تواند فایل reset، متغیر ها، رنگ ها، فونت ها، فونت سایز ها و… باشد.

Import کردن فایل ها در Sass

درست مانند CSS در Sass هم از دستور @import پشتیبانی می شود.

این دستور به شما این امکان را می دهد که محتوای یک فایل را در یک فایل دیگر وارد کنید.

البته این دستور در CSS مشکلی اساسی به حساب می آید چرا که به شدت عملکرد را پایین می آورد.

با استفاده از این دستور در فایل CSS خود در واقع یک درخواست HTTP بیشتر تولید می کنید.

اما خوب همانطور که احتمالا با دنبال کردن قسمت های قبلی آموزش حدس می زنید، Sass محتوای این فایل ها را به فایل های CSS شما اضافه می کند بنابراین درخواست HTTP اضافی وجود ندارد.

@import filename; 

نکته

برای وارد کردن فایل Sass نیازی به اشاره به پسوند فایل یا همان عبارت scss نیست و کامپایلر Sass به طور خودکار فرض را بر این می گیرد که فایل مورد نظر شما یکی از پسوند های .sass یا .scss را داراست.

شما همچنین می توانید فایل CSS هم درون ریزی یا import کنید.

پس از درون ریزی می توانید از تمامی متغیر ها و mixin های تعریف شده در فایل درون ریزی شده در فایل مورد نظر خود استفاده کنید.

امکان درون ریزی فایل ها به هر تعداد وجود دارد:

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

فرض کنید که فایل reset ما تحت عنوان reset.scss است که محتوای آن به صورت زیر می باشد:

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

حالا می خواهیم محتویات این فایل را در فایل دیگری به نام standard.scss درون ریزی کنیم.

در کد زیر فایل reset.scss را در global scope درون ریزی می کنیم.

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

بنابراین وقتی فایل standard.css کامپایل شود، کد CSS نهایی به صورت زیر در می آید:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

درون ریزی Sass در Partials

به صورت پیشفرض Sass تمامی فایل های .scss را به طور مستقیم کامپایل می کند.

اما مواقعی پیش می آید که شما نمی خواهید خود فایل به صورت مستقیم تبدیل به یک فایل .css بشود.

مثلا ممکن است که یک فایل را فقط برای import کردن در فایل های دیگر نوشته باشید و نخواهید که آن فایل خود به صورت یک فایل جداگانه .css تبدیل شود.

Sass ساز و کاری برای این موضوع در نظر گرفته است.

اگر نام فایل را با زیر خط یعنی _ شروع کنید، Sass آن فایل را تبدیل به فایل .css نمی کند.

فایل هایی که این گونه نام گذاری می شوند در Sass به فایل های Partial معروف هستند.

 _filename 

در ادامه فایل Partial را می بینید که در هنگام شروع به کار کامپایلر Sass تبدیل به فایل colors.css نمی شود.

"_colors.scss":
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

حالا اگر این فایل Partial را در فایل دیگری بخواهید import کنید کافی است که زیر خط را در دستور import قرار ندهید.

Sass متوجه می شود که منظور شما فایل colors.scss_ است و محتوایات آن را در فایل مورد نظر شما وارد می کند.

@import "colors";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}

به این ترتیب فایل colors.scss_ فقط برای import شدن در فایل های دیگر کاربرد دارد.

برای دنبال کردن نوشته های کاپ کد به کانال تلگرامی آن (cupcode_ir@) بپیوندید!
برای ثبت سفارش برنامه نویسی، طراحی وب سایت، بهینه سازی و... در کاپ کد کلیک کنید.

دیدگاه خود را بیان کنید

@