آموزش کار با دستور @import در Sass

آموزش Sass – کار با دستور @import

Sass دستور @import زبان CSS را به ارث برده (بسط داده) و به واسطه ی آن این امکان را فراهم می آورد که فایل های SCSS/SASS را وارد متن پروژه نمایید. تمامی فایل های import شده SCSS/SASS با یکدیگر در قالب یک فایل (خروجی) واحد CSS ادغام می شوند. علاوه بر آن، هر متغیر یا mixin ای که داخل فایل های import شده تعریف شده باشد، به راحتی در بستر فایل اصلی قابل استفاده خواهند بود.

Sass برای دسترسی به کلیه ی فایل های Sass، علاوه بر پوشه ی جاری، تمامی پوشه های حاوی فایل Sass که تحت دایرکتوری Rack، Rails یا Merb قرار دارند را جستجو می کند.

می توان با ارسال پارامتر :load_paths یا --load-path به خط فرمان، سایر پوشه های مد نظر را نیز جستجو کرد.

دستور@import جهت وارد کردن فایل مورد نظر در متن پروژه، اسم فایل مربوطه را به عنوان پارامتر دریافت می کند. دستور نام برده به طور پیش فرض، فایل Sass را جستجو و در پروژه تزریق می کند. با این حال شرایطی وجود دارد که تحت آن ها این دستور ، به دستور @import اختصاصی CSS کامپایل می شود. این شرایط به شرح زیر می باشند:

• اگر پسوند فایل .css باشد.
• اگر اسم فایل با http:// آغاز شود.
• اگر اسم فایل به عنوان پارامتر در قالب یک آدرس به تابع url() فرستاده شده باشد.
• دستور @import دارای media query باشد.

اگر هیچ یک از شرایط بالا برقرار نبوده و پسوند فایل .scssباشد، در آن صورت فایل Sass یا SCSS (نام گذاری شده) در متن پروژه وارد خواهد شد. حال چنانچه فایل پسوند مشخصی نداشته باشد، Sass سعی می کند فایلی به آن نام که دارای پسوند .scss یا .sass هست را پیدا کرده و سپس آن را در متن پروژه وارد کند.

مثال کاربردی

یک فایل SASS با کد زیر ایجاد نمایید:

@import "style.css";
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

می توانید با اجرای دستور زیر به SASS اعلان کنید که بر روی محتوای فایل نظارت داشته و به تغییرات در آن گوش فرا دهد و سپس هرگاه محتوای فایل SASS تغییر کرد، CSS متناظر آن را نیز بروز رسانی کند:

sass --watch C:\ruby\lib\sass\style.scss:style.css

کد بالا به فایل CSS زیر کامپایل و ترجمه می شود:

@import url(style.css);
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

روش های متعددی برای وارد کردن فایل در پروژه با استفاده از دستور@import وجود دارد که در زیر به شرح آن ها خواهیم پرداخت.

Partial ها

اگر شما یک فایل SCSS یا Sass در اختیار دارید که می خواهید در پروژه وارد کنید اما به فایل CSS متناظر آن احتیاج ندارید (نمی خواهید به فایل CSS کامپایل شود)، در آن صورت کافی است یک زیرخط (underscore) به ابتدای اسم فایل اضافه نمایید. این زیر خط به SASS اعلان می کند که نباید فایل مورد نظر را به فایل متعارف CSS کامپایل کند. سپس می توانید این فایل ها را بدون درج زیر خط در ابتدای اسم آن ها، در پروژه import نمایید.

فرض کنید فایلی به نام _colors.scss دارید. همان طور که می بینید در ابتدای اسم فایل یک زیر خط الصاق شده که سبب می شود فایلی به نام _colors.css ایجاد نشود. سپس شما می توانید با اجرای دستور زیر، فایل _colors.scss را به راحتی import نمایید.

@import "colors";

توجه داشته باشید که شما نمی توانید یک فایل partial را همزمان با فایل غیر partial همنام در یک پوشه ی نگهداری نمایید. به عبارت دیگر فایل _colors.scss نباید در کنار فایل colors.scss داخل پوشه ای واحد قرار گیرد.

دستورات @import تودرتو/ Nested @import #nested-import

اغلب مواقع بهتر است که دستورات @import را در بالای فایل درج نمایید. با این وجود شما می توانید آن ها را داخل دستورات @media و CSS نیز بگنجانید. درست مانند یک دستور @import که در پایین فایل قید می شود، این دستور تمامی محتوای فایل وارد شده در پروژه با استفاده از @import را نیز دربرمی گیرد.لازم به ذکر است که دستورات import شده مربوطه در محلی یکسان با دستور @import اولیه و اصلی جایگذاری (nest) می شوند.

برای مثال، اگر فایل example.scss حاوی قطعه کد زیر باشد:

.example {
  color: red;
}

آنگاه قطعه کد زیر:

#main {
  @import "example";
}

به این دستور کامپایل می شود:

#main .example {
  color: red;
}

دستوراتی (Directive) که منحصرا (همیشه) در پایین فایل جایگذاری می شوند، مانند @mixin یا @charset، در فایل هایی که به صورت تودرتو (در بستری nested) با دستور @import وارد شده اند، جایگاهی نداشته و قابل استفاده نیستند.

همچنین امکان درج و فراخوانی دستور @import در دستورات کنترلی (control directives) و بدنه ی mixin ها وجود ندارد.

مثال

برای مثال یک فایل SASS با کد زیر ایجاد نمایید:

.container {
   background: #ffff;
}

فایل بالا را در بدنه ی فایل SASS که در زیر نمایش داده شده، وارد/import نمایید:

h4 {
   @import "example";
}

کد بالا به فایل CSS زیر کامپایل می شود:

h4 .container {
   background: #ffff;
}

در زیر دستور نگارشی و نحوه ی وارد کردن فایل از بیرون به داخل فایل SCSS به نمایش گذاشته شده است:

@import 'stylesheet'

مثال 2

نمونه ی زیر نحوه ی استفاده ی عملی از @import در فایل SCSS را نشان می دهد:

import.htm
< html >
   < head >
      < title >Import example of sass< /title >
      < link rel="stylesheet" type="text/css" href="style.css" / >
   < /head >
   < body class="container" >
      < h1 >Example using Import< /h1 >
      < h4 >Import the files in SASS< /h4 >
      < ul >
         < li >Red< /li >
         < li >Green< /li >
      < /ul >
   < /body >
< /html >

حال فایل _partial.scss را ایجاد کنید:

_partial.scss
ul{
   margin: 0;
   padding: 1;
}
li{
   color: #680000;
}

در گام بعدی فایل style.scss را ایجاد نمایید.

style.scss
@import "partial";
.container {
   background: #ffff;
}
h1 {
   color: #77C1EF;
}
h4 {
   color: #B98D25;
}

می توانید با اجرای دستور زیر به SASS فرمان دهید که بر روی محتوای فایل SASS نظارت داشته و زمانی که فایل SASS تغییر کرد، کد متناظر CSS را نیز بروز رسانی کند.

sass --watch C:\ruby\lib\sass\style.scss:style.css

با اجرای دستور فوق فایل style.css به صورت خودکار ایجاد می شود. محتوای این فایل به صورت زیر خواهد بود:

style.css
ul {
  margin: 0;
  padding: 1; }
li {
  color: #680000; }
.container {
  background: #ffff; }
h1 {
  color: #77C1EF; }
h4 {
  color: #B98D25; }

خروجی

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

• کد HTML مورد نظر را در فایل import.html ذخیره نمایید.
• فایل HTML نام برده را با مرورگر دلخواه باز کرده و خروجی را مشاهده نمایید.