مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. با جلسه هجدهم از آموزش کامل دوره LESS در خدمت شما هستیم در این جلسه قصد داریم Import کردن دستورات در LESS را به شما آموزش دهیم.اگر به خاطر داشته باشید در جلسه ۱۱ نحوه ایمپورت کردن در LESS آموزش داده شد.این جلسه مکمل جلسه یازدهم می باشد.
Import کردن دستورات در LESS
از دستور import@ برای وارد کردن فایل ها به کدهای مورد نظر استفاده می شود. این دستور کدهای Less را در فایل های مختلف انتشار می دهد و باعث می شود که ساختار کدها به سادگی ایجاد شود. شما می توانید از دستور import@ در هر کجا از کدهای خود استفاده کنید. بعنوان مثال، شما می توانید به صورت زیر، با استفاده از کلمه ی کلیدی import@ یک فایل را اضافه کنید:
پسوند فایل ها
شما می توانید از دستور 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 را بسازید:
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 ایمپورت می شود.
حالا می توانید با اجرای دستور زیر، فایل style.less را به فایل style.css کامپایل کنید:
مثال :
| lessc style.less style.css |
با اجرای دستور بالا، فایل style.css به صورت خودکار ایجاد می شود:
style.css
مثال :
| .myline { font-size: 20px; } .myline { color: #FF0000; } |
خروجی
گام های زیر را انجام دهید تا مشاهده کنید که کدهای بالا چگونه کار می کنند:
- کدهای اچ تی ام ال بالای صفحه را با نام import_directives.html ذخیره کنید.
- حالا این فایل html را در مرورگر خود باز کنید. خروجی به صورت زیر خواهد بود.
کلام آخر
Import کردن دستورات در LESS، از جمله مهمترین اعمالی است که باید به آن توجه شود.در دو جلسه ای که برای شما Import کردن را مطرح کردیم کلیه اصول لازم ذکر شد امیدواریم از مطالب بهره کافی را برده باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
