به آموزش 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; }
