سبد خرید (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. این فایل اچ تی ام ال را در یک مرورگر باز کنید، خروجی زیر نمایش داده خواهد شد.

 

دیدگاه‌ها  

+1 # ali75 1395-10-23 09:00
خسته نباشید.
در این قسمت در سایت اصلی خیلی چیزای دیگه ای هم داره اون جدول هارو هیچکدومو نزاشتین.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-10-23 11:40
ممنون.
در آینده قصد داریم کتابی در زمینه ی آموزش پیشرفته ی Less ترجمه کنیم که همه ی مباحث رو دربر می گیره.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن