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

از دستور 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>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <h2>Example of Import Directives</h2>
   <p class="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 را در مرورگر خود باز کنید. خروجی به صورت زیر خواهد بود.