۱۴
اسفند

جلسه ۲۱ : محافظ CSS درLESS

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

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

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. و کاربرانی که دوره کامل آموزشLESS را دنبال می کنند.این جلسه قصد داریم نحوه کارکرد محافظ CSS درLESS و سلکتورهای CSS را به شما آموزش دهیم.

محافظ CSS درLESS

مانند محافظ Mixin، محافظ ها می توانند به انتخابگرهای CSS اعمال شوند،محافظ ها برای مطابقت با مقادیر ساده یا شمارش آرگومان ها در عبارات استفاده می شوند. این عمل به سلکتورهای CSS اعمال می شود و برای اعلام mixinها است و بلافاصله آن را فراخوانی می کند.اینکار با استفاده از & صورت میگیرد، که به شما اجازه می دهد تا چندین محافظ را گروه بندی کنید.

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

css_guard.html

مثال :

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

<!doctype html>

<head>

</head>

<body>

<h2>Welcome to TutorialsPoint</h2>

</div>

<h3>The largest Tutorials Library on the web.</h3>

</div>

</body>

</html>

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

style.less

مثال :

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

@usedScope: global;

.mixin() {

@usedScope: mixin;

.cont when (@usedScope = global) {

background-color: red;

color: black;

}

.style when (@usedScope = mixin) {

background-color: blue;

color: white;

}

@usedScope: mixin;

}

.mixin();

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

مثال :

lessc style.less style.css

1	lessc style.less style.css

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

style.css

مثال :

.style {
   background-color: blue;
   color: white;
}

.style {

background-color: blue;

color: white;

}

خروجی

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

کد html بالا را در فایل css_guard.html ذخیره کنید
سپس فایل html را در مرور گر خود باز گنید تصویر زیر به شما نشان داده می شود:

محافظ CSS درLESS

کلام آخر

محافظ CSS درLESS به سلکتورهای CSS اعمال می شود و برای اعلام mixinها است و بلافاصله آن را فراخوانی می کند.شما همچنین می توانید با ترکیب if() و & یک ویژگی جدید به دست آورید،که به شما این امکان را می دهد که چند محافظ را گروه بندی کنید.آموزش نحوه کارکرد محافظ CSS درLESS به اتمام رسید،جلسه بعد با ما همراه باشید تا کاربرد حلقه ها در LESS را آموزش ببینید.

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

سلکتورهای CSS ,محافظ CSS درLESS

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

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

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

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

جلسه ۲۱ : محافظ CSS درLESS

مقدمه

محافظ CSS درLESS

css_guard.html

style.less

style.css

خروجی

کلام آخر

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

مقدمه

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

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ