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 را در مرورگر خود باز کنید. خروجی به صورت زیر خواهد بود.
- نوشته شده توسط احسان عباسی
- بازدید: 3032