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

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>

<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 را در مرورگر خود باز کنید. خروجی به صورت زیر خواهد بود.

اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google