آموزش طراحی سایت (HTML CSS Javascript) | آتریا

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

: نوشته شده توسط احسان عباسی; بازدید: 3293

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی