سبد (0)

توسعه پذیری یا extend در Less

توضیحات مقدماتی

Extend یک شبه کلاس در Less است که به ما امکان می دهد تا با استفاده از سلکتور extend: کلاس های دیگر سلکتورها را توسعه دهیم.

مثال

در مثال زیر، نحوه ی کار کردن با شبه کلاس extend در Less نشان داده شده است:

مثال (توسعه پذیری یا extend در Less)

<!doctype html>
<head>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <div class="style">
     <h2>Welcome to TutorialsPoint</h2>
     <p>Hello!!!!!</p>
   </div>
</body>
</html>

 اکنون فایل style.less را ایجاد می کنیم:

Title

h2 {
  &:extend(.style);
  font-style: italic;
}
.style {
  background: green;
}

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

lessc style.less style.css

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

h2 {
  font-style: italic;
}
.style,
h2 {
  background: blue;
}

خروجی کدهای بالا

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

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

 نحوه ی نوشتن دستور extend در Less

دستور extend را می توان در داخل آکولادها قرار داد و یا آن را به یک سلکتور(گزینشگر) اضافه نمود. می توان در داخل دستور extend یک یا چند کلاس را اضافه کرد به طوری که با استفاده از کاما از یکدیگر جدا شده باشند. 

مثال

در مثال زیر، می توانید نحوه ی استفاده از سینتکس extend را در یک فایل Less مشاهده نمایید:

<!doctype html>
<head>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <div class="style">
    <h2>Welcome to TutorialsPoint</h2>
    <div class="container">
      <p>Hello!!!!!</p>
    </div>
   </div>
</body>
</html>

اکنون فایل style.less را ایجاد می کنیم:

.style:extend(.container, .img)
{
  background: #BF70A5;
}
.container {
  font-style: italic;
}
.img{
   font-size: 30px;
 }

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

lessc style.less style.css

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

.style {
  background: #BF70A5;
}
.container,
.style {
  font-style: italic;
}
.img,
.style {
  font-size: 30px;
}

خروجی کدهای بالا

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

  1. فایل اچ تی ام ال بالا را با نام extend_syntax.html ذخیره کنید.
  2. این فایل اچ تی ام ال را در یک مرورگر باز کنید، خروجی زیر نمایش داده خواهد شد.

 

نوشته شده توسط احسان عباسی
بازدید: 3035

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

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