%45 تخفیف، با کد Tabestan روی تمام آموزش ها، بمناسبت جشنواره تابستانه بیاموز ...!
زمان باقی مانده (آخرین فرصت)
سبد (0)

تبلیغات

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

 

 


مثال زنده: 

See the Pen mixin less by Ehsan Abbasi (@sbaloot) on CodePen.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی