برگرداندن مقادیر در mixin ها

برگرداندن مقادیر در mixin ها

mixin ها مشابه با توابع هستند و مقادیری که در یک mixin تعریف می شوند، می توانند همچون مقادیر برگشتی در آن mixin رفتار کنند.

مثال

مثال زیر، کاربرد mixin ها و مقادیر برگشتی را در یک فایل Less نشان می دهد:

<html>

<head>

<link rel=”stylesheet” href=”style.css” type=”text/css” />

<title>Mixins and return values</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 را ایجاد می کنیم:

.padding(@x, @y) {

@padding: ((@x + @y) / 2);

}

.myclass{

.padding(80px, 120px); // call to the mixin

padding-left: @padding; // returns the value

}

حالا با استفاده از دستور زیر، فایل style.less را به فایل style.css کامپایل می کنیم:

lessc style.less style.css

پس از اجرای دستور بالا، فایل style.css به طور اتوماتیک به صورت زیر ایجاد خواهد شد:

.myclass {

padding-left: 100px;

}

ایجاد خروجی

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

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

 



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


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

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


بالا

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