ایمپورت (@import)
در Sass می توانی کد را تکه تکه نگه داری. سپس با دستور @import همه را کنار هم بیاوری. «ایمپورت (Import)» یعنی محتوای یک فایل را داخل فایل دیگر وارد کنیم. بنابراین کد DRY می ماند و نگهداری آسان تر می شود.
ایمپورت در Sass چیست؟
دستور @import محتویات یک فایل Sass را به فایل اصلی اضافه می کند. برخلاف CSS، این کار درخواست HTTP اضافه ایجاد نمی کند. چون ترنس پایلر، فایل ها را یکی می کند.
سینتکس پایه @import
@import filename;
نکته: پسوند لازم نیست. Sass خودش .sass یا .scss را حدس می زند. همچنین می توانی فایل CSS را هم ایمپورت کنی.
ایمپورت چند فایل
@import "variables";
@import "colors";
@import "reset";
نمونه Reset و استفاده در فایل اصلی
/* reset.scss */
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
/* standard.scss */
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
نکته: قراردادن @import در ابتدای فایل، محتوای ایمپورت شده را سراسری می کند. بنابراین متغیرها و میکسین ها همه جا در دسترس هستند.
خروجی CSS پس از ترنس پایل
/* CSS output */
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
پارتشیال ها (Partials) در Sass
اگر نام فایل با زیرخط شروع شود، Sass آن را مستقیم ترنس پایل نمی کند. این فایل ها را «پارتشیال (Partial)» می نامیم و فقط برای ایمپورت هستند.
سینتکس نام گذاری پارتشیال
_filename
نمونه پارتشیال رنگ ها
/* _colors.scss */
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
شروع سریع در 3 گام
- یک پارتشیال برای متغیرها بساز.
- در فایل اصلی آن را ایمپورت کن.
- کد را ترنس پایل کن و نتیجه را تست کن.
برای ادامه، مقاله تو در تو در Sass را ببین. همچنین صفحه متغیرها در Sass خیلی کاربردی است. برای بازگشت، این صفحه ایمپورت در Sass را نگه دار.
جمع بندی سریع
- @import فایل ها را در خروجی یکی می کند.
- HTTP اضافی در زمان اجرا ندارد.
- پارتشیال با زیرخط شروع می شود.
- متغیرها بعد از ایمپورت در دسترس اند.