تعریف
mixin ها شامل متغیر هستند و میتواند در حوزه ای که فراخوانی میشود دیده شوند. اما یک استثنا دارد. اگر caller شامل متغیرهایی با همان نام باشد، متغیرها در حوزه caller کپی نمیشوند. تنها متغیرهای داخل حوزه caller که متغیرهای protected و inherited هستند override میشوند.
مثال
مثال زیر حوزه mixin در فایل LESS را نشان میدهد:
<html> <head> <link rel="stylesheet" href="/style.css" type="text/css" /> <title>Mixins Scope</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 را ایجاد کنید.
.mixin() {
@bgcolor: #C0C0C0;
}
.myclass{
.mixin();
background-color: @bgcolor;
}
با استفاده از دستور زیر فایل style.less را به style.css تبدیل کنید:
lessc style.less style.css
با اجرای دستور بالا فایل style.css بصورت خود به خود ایجاد میشود و شامل کدهای زیر است:
.myclass {
background-color: #C0C0C0;
}
خروجی
بیایید دستورات زیر را انجام دهیم تا خروجی را ببینیم:
- کدهای html بالا را در فایل less_mixin_as_function_scope.html ذخیره کنید.
- فایل HTML را در مرورگر باز کنید، خروجی بدین شکل خواهد بود.
