تعریف
دستورات import میتواند شامل متغیری باشد که در خود مسیری ذخیره کرده است. زمانی که شما یک پوشه یکسان دارید این کار بسیار مفید خواهد بود.
مثال
مثال زیر الحاق دستورات import در فایل LESS را نشان میدهد:
<html> <head> <link rel="stylesheet" href="/style.css" type="text/css" /> <title>LESS Variables in Import Statements</title> </head> <body> <div class="myclass"> <h2>Welcome to Tutorialspoint</h2> <p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p> </div> </body> </html>
سپس فایل style.less را ایجاد کنید.
@path : "http://kntit.ir/images/kntit/Less"; @import "@{path}/external1.less"; .myclass{ color : #A52A2A; }
فایل external1.less از مسیر http://kntit.ir/images/kntit/Less/external1.less به فایل style.less شما import میشود که شامل استایل زیر است:
.myclass{
background: #C0C0C0;
}
با استفاده از دستور زیر فایل style.less را به style.css تبدیل کنید:
lessc style.less style.css
با اجرای دستور بالا فایل style.css بصورت خود به خود ایجاد میشود و شامل کدهای زیر است:
body {
background: #C0C0C0;
}
p {
color: #A52A2A;
}
خروجی
بیایید دستورات زیر را انجام دهیم تا خروجی را ببینیم:
- کدهای html بالا را در فایل less_variables_interpolation_import.html ذخیره کنید.
- فایل HTML را در مرورگر باز کنید، خروجی بدین شکل خواهد بود.
