تعریف
هرکجا که mixin درون یک mixin دیگر تعریف میشود، میتواند بعنوان مقدار برگشت داده شده استفاده شود.
مثال
مثال زیر mixin های داخل یک mixin در فایل LESS را نشان میدهد:
<html> <head> <link rel="stylesheet" href="/style.css" type="text/css" /> <title>Mixin inside mixin</title> </head> <body> <h1>Welcome to Tutorialspoint</h1> <div class="myclass"> <p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p> </div> </body> </html>
سپس فایل style.less را ایجاد کنید.
.outerMixin(@value) {
.nestedMixin() {
font-size: @value;
}
}
.myclass {
.outerMixin(30);
.nestedMixin();
}
با استفاده از دستور زیر فایل style.less را به style.css تبدیل کنید:
lessc style.less style.css
با اجرای دستور بالا فایل style.css بصورت خود به خود ایجاد میشود و شامل کدهای زیر است:
.myclass {
font-size: 30;
}
خروجی
بیایید دستورات زیر را انجام دهیم تا خروجی را ببینیم:
- کدهای html بالا را در فایل less_mixin_inside_mixin.html ذخیره کنید.
- فایل HTML را در مرورگر باز کنید، خروجی بدین شکل خواهد بود.
