دوره های پیشنهادی

آموزش LESS گسترش یا extend در LESS

علیرضا حاتمی نیا 790

less extend

به آموزش Less خوش آمدید. در جلسه قبلی با آموزش متغیرها در Less در خدمت شما بودیم و در این جلسه با اصلاحی بنام گسترش یا Extend در Less آشنا می شوید.

گسترش یا extend در Less

Extend در Less به منظور اضافه کردن کلاس به کلاسی گسترش یافته مورد استفاده قرار می گیرد. به عبارتی دیگر Less توسط سلکتور :extend ، کلاس مورد نظر را به کلاس توسعه یافته اضافه می کند.
برای درک بهتر مطلب به مثال ساده زیر دقت کنید :
فرض کنید کلاسی با نام class1 و class2 با خصوصیات زیر موجود می باشد:

.class1 {
    background-color: red;
    font-size: 20px;
}

.class2 {
    color:white;
}

حال قصد داریم تا ضمن نگهداری خصوصیات calss2، این کلاس را به کلاس class1 نیز اضافه کنیم تا خصوصیات این کلاس را نیز داشته باشد.

در اینجا با کمک extend در Less به این صورت عمل می کنیم: 

style.less

.class1 {
  background-color: red;
  font-size: 20px;
}
.class2:extend(.class1) {
  color: white;
}

حال فايل style.less را به style.css کامپايل مي کنيم. 

lessc style.less style.css

مشاهده می کنید که class2 به class1 اضافه شده است:

style.css

.class1,
.class2 {
  background-color: red;
  font-size: 20px;
}
.class2 {
  color: white;
}

سلکتور extend می تواند در همان خط یا در داخل عبارت و به صورت تودرتو مورد استفاده قرار گیرد:

style.less

.class1 {
  background-color: red;
  font-size: 20px;
}
.class2 {
    &:extend(.class1);
    color: white;
}

حال فايل style.less را به style.css کامپايل مي کنيم. 

lessc style.less style.css

style.css

.class1,
.class2 {
  background-color: red;
  font-size: 20px;
}
.class2 {
  color: white;
}

در مثال بالا می توانید class2 را به بیش از یک کلاس اضافه کنید. به مثال زیر دقت کنید:

style.less

.class1 {
  background-color: red;
  font-size: 20px;
}
p {
    border: 1px solid black;
}
.class2 {
    &:extend(.class1,p);
    color: white;
}

style.css

.class1,
.class2 {
  background-color: red;
  font-size: 20px;
}
p,
.class2 {
  border: 1px solid black;
}
.class2 {
  color: white;
}

 

 

کلمات کلیدی

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت