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