درست مانند CSS، Sass از @import نیز پشتیبانی میکند.
بخشنامه.
دستورالعمل @import به شما امکان می دهد
محتوای یک فایل در فایل دیگر.
دستورالعمل @import CSS دارای یک اشکال بزرگ است.
به دلیل مشکلات عملکرد؛ یک درخواست HTTP اضافی ایجاد می کند
هر بار که بهش زنگ میزنی با این حال، Sass @import
بخشنامه
شامل فایل در CSS. بنابراین هیچ تماس HTTP اضافی در زمان اجرا مورد نیاز نیست!
Sass Import Syntax:
@import filename;
نکته: لازم نیست a را مشخص کنید
پسوند فایل، Sass به طور خودکار فرض می کند که منظور شما یک فایل .sass یا .scss است.
همچنین می توانید فایل های CSS را وارد کنید. @import
دستورالعمل فایل و هر متغیر یا میکس تعریف شده در ایمپورت شده را وارد می کند
سپس فایل را می توان در فایل اصلی استفاده کرد.
شما می توانید هر تعداد فایلی را که نیاز دارید در فایل اصلی وارد کنید:
مثال
@import "variables";
@import
"colors";
@import
"reset";
اجازه دهید به یک مثال نگاه کنیم: فرض کنیم یک فایل تنظیم مجدد به نام "reset.scss" داریم که به شکل زیر است:
مثال
SCSS Syntax (reset.scss):
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
و اکنون می خواهیم فایل "reset.scss" را به فایل دیگری به نام "standard.scss" وارد کنیم.
چگونه این کار را انجام می دهیم: اضافه کردن @import طبیعی است
دستورالعمل در بالای یک فایل؛ به این ترتیب محتوای آن یک دامنه جهانی خواهد داشت:
SCSS Syntax (standard.scss):
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
بنابراین، هنگامی که فایل "standard.css" ترجمه می شود، CSS به این شکل خواهد بود:
CSS output:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}