۱۴
اسفند

جلسه ۲۰ : محافظ Mixin درLESS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. این جلسه با شما خواهیم بود با آموزش محافظ Mixin درLESS.اگر می خواهید مقادیر ساده یا تعدادی از آرگومان ها را در عبارتی مطابقت دهید، می توانید از محافظ Mixin ها(guards) استفاده کنید.این عمل وابسته به mixin است و شامل شرایطی است که به mixinها متصل است. .

محافظ Mixin درLESS

هر mixin یک یا چند نگهبان دارد که توسط کاما جدا می شوند؛ یک نگهبان باید در داخل پرانتز قرار گیرد LESS از mixinهای محافظ به جای عبارات if / else استفاده می کند و محاسبات را برای تعیین mixin مطابقت می دهد.

توضیحات زیر انواع گوناگون محافظ Mixin را توصیف می کند.

عملگرهای مقایسه محافظ
شما می توانید از اپراتور مقایسه (=) برای مقایسه اعداد، رشته ها، شناسه ها و غیره استفاده کنید.
عملگرهای منطقی محافظ
شما می توانید از کلید واژه and برای کار با عملگرهای منطقی محافظ استفاده کنید.
تابع چک کردن نوشتن:شامل توابع ساخته شده است برای تعیین انواع ارزش برای مطابقت mixins.
Mixinهای شرطی:LESS از تابع پیش فرض استفاده می کند تا mixin را با سایر mixin ها مطابقت دهد.

مثال زیر نحوه استفاده از محافظ Mixin را در فایل LESS نشان می دهد:

مثال :

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

<!doctype html>

<head>

<title>Mixin Guards</title>

</head>

<body>

<h2>Example of Mixin Guards</h2>

<p class = "class1">Hello World...</p>

<p class = "class2">Welcome to Tutorialspoint...</p>

</body>

</html>

اکنون فایل style.less را بسازید:

style.less

مثال :

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

.mixin (@a) when (lightness(@a) >= 50%) {

font-size: 14px;

}

.mixin (@a) when (lightness(@a) < 50%) {

font-size: 16px;

}

.mixin (@a) {

color: @a;

}

.class1 {

.mixin(#FF0000)

}

.class2 {

.mixin(#555)

}

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

مثال :

lessc style.less style.css

1	lessc style.less style.css

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

style.css

مثال :

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

.class1 {

font-size: 14px;

color: #FF0000;

}

.class2 {

font-size: 16px;

color: #555;

}

خروجی

با دنبال کردن گام های زیر خواهید دید کد بالا چگونه عمل میکند:

کد HTML بالا را در فایل mixin-guard.html ذخیره کنید
سپس کد HTML را در مرورگر خود باز کنید،در نهایت خروجی زیر به شما نشان داده خواهد شد.

محافظ Mixin درLESS

کلام آخر

آموزش محافظ Mixin درLESS نیز به اتمام رسید. همانطور که گفته شد LESS از mixinهای محافظ به جای عبارات if / else استفاده می کند و محاسبات را برای تعیین mixinمطابقت می دهد.

به اشتراک بگذارید

Mixin Guards ,عبارات if / else با mixin ,عمل وابسته به mixin ,محافظ Mixin درLESS

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۰ : محافظ Mixin درLESS

مقدمه

محافظ Mixin درLESS

style.less

style.css

خروجی

کلام آخر

لیست مطالب دوره

مقدمه

ویژگی های زبان برنامه نویسی LESS

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ