سبد (0)

import کردن دستورات در Less

توضیحات مقدماتی

از دستور import@ برای وارد کردن فایل ها به کدهای مورد نظر استفاده می شود. این دستور کدهای Less را در فایل های مختلف انتشار می دهد و باعث می شود که ساختار کدها به سادگی ایجاد شود. شما می توانید از دستور import@ در هر کجا از کدهای خود استفاده کنید. بعنوان مثال، شما می توانید به صورت زیر، با استفاده از کلمه ی کلیدی import@ یک فایل را اضافه کنید:

@import "file_name.less"

 پسوند فایل ها

شما می توانید از دستور import@ بسته به نوع فایل های مختلفی از قبیل زیر استفاده کنید:

  • در صورتی که از پسوند css. استفاده کنید، یک فایل css در نظر گرفته می شود.
  • در صورتی که از دیگر پسوند ها استفاده کنید، یک فایل Less در نظر گرفته می شود و import می شود. 
  • در صورتی که از پسوندی استفاده نکنید، یک فایل Less در نظر گرفته می شود و import می شود. 
@import"style";      // imports the style.less@import"style.less"; // imports the style.less@import"style.php";  // imports the style.php as a less file@import"style.css";  // it will kept the statement as it is

 مثال

مثال زیر نحوه ی import کردن یک فایل Less را نشان می دهد:

<!doctype html><head><title>Import Directives</title><linkrel="stylesheet"href="style.css"type="text/css" /></head><body><h2>Example of Import Directives</h2><pclass="myline">Welcome to Tutorialspoint...</p></body></html>

حالا فایل import_dir.less را ایجاد کنید:

.myline {
 font-size: 20px;
}

سپس فایل style.lessرا ایجاد کنید:

@import"http://www.tutorialspoint.com/less/import_dir.less";.myline {
  color:#FF0000;
}

با اجرای دستورات بالا، فایل import_dir.less در فایل style.less از آدرس http://www.tutorialspoint.com/less/import_dir.less ایمپورت می شود. 

اکنون می توانید با اجرای دستور زیر، فایل style.less را به فایل style.css کامپایل کنید:

lessc style.less style.css

 با اجرای دستور بالا، فایل style.css به طور اتوماتیک ایجاد می شود:

.myline {
  font-size: 20px;
}.myline {
  color: #FF0000;
}

خروجی کدهای بالا

گام های زیر را انجام دهید تا مشاهده کنید که کدهای بالا چگونه کار می کنند:

  • کدهای اچ تی ام ال بالای صفحه را با نام import_directives.html ذخیره کنید.
  • حالا این فایل html را در مرورگر خود باز کنید. خروجی به صورت زیر خواهد بود.

 

 

 

 

 

 

 

 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان