mixin های تو در تو در Less

چاپ

توضیحات مقدماتی

در صورتی که یک 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;
}

 ایجاد خروجی

گام های زیر را انجام دهید تا خروجی کدهای بالا را مشاهده نمایید:

  1. فایل اچ تی ام ال بالای صفحه را با نام less_mixin_inside_mixin.html ذخیره کنید.
  2. حالا این فایل را در مرورگر خود باز کنید. خروجی به صورت زیر خواهد بود.

نوشته شده توسط احسان عباسی
بازدید: 2713