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

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. حالا این فایل را در مرورگر خود باز کنید. خروجی به صورت زیر خواهد بود.


اگه خوشت اومد به اشتراک بزار


اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google