تعریف
از این دستور برای Importe محتوای فایل های LESS یا CSS استفاده میشود.
مثال
مثال زیر Importe در فایل LESS را نشان میدهد:
<html> <head> <title>Less Importing</title> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body> <h1>Example using Importing</h1> <p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p> <p class="myclass1">It allows reusing CSS code and writing LESS code with same semantics.</p> <p class="myclass2">LESS supports creating cleaner, cross-browser friendly CSS faster and easier.</p> </body> </html>
سپس فایل myfile.less را ایجاد کنید.
.myclass{
color: #FF8000;
}
.myclass1{
color: #5882FA;
}
سپس فایل style.less را ایجاد کنید.
@import "http://kntit.ir/files/myfile.less";
.myclass2
{
color: #FF0000;
}
فایل myfile.less از طریق مسیر http://kntit.ir/files/myfile.less در فایل style.less اضافه میشود.
با استفاده از دستور زیر فایل style.less را به style.css تبدیل کنید:
lessc style.less style.css
با اجرای دستور بالا فایل style.css بصورت خود به خود ایجاد میشود و شامل کدهای زیر است:
.myclass {
color: #FF8000;
}
.myclass1 {
color: #5882FA;
}
.myclass2 {
color: #FF0000;
}
خروجی
بیایید دستورات زیر را انجام دهیم تا خروجی را ببینیم:
- کدهای html بالا را در فایل importing.html ذخیره کنید.
- فایل HTML را در مرورگر باز کنید، خروجی بدین شکل خواهد بود.
