آموزش طراحی سایت (HTML CSS Javascript) | آتریا

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;
}

ایجاد خروجی

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

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

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

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی