კლასების გაფართოება LESS-ში

მიქსინების ნაკლი ისაა, რომ კოდის დუბლირება ხდება. მოდით, მაგალითით ვნახოთ, რას გულისხმობენ.

დავუშვათ, გვაქვს შემდეგი კოდი:

.mix {
	width: 100px;
	height: 100px;
}
p {
	.mix; 
	color: red;
}

ეს კოდი შემდეგნაირად კომპილირდება, რაც გამოიწვევს დუბლირებას:

.mix {
	width: 100px;
	height: 100px;
}
p {
	width: 100px;
	height: 100px;
	color: red;
}

უფრო კომპაქტური იქნებოდა, თუ ეს კოდი ასე კომპილირდებოდა:

.mix, p {
	width: 100px;
	height: 100px;
}
p {
	color: red;
}

ამის მიღწევა შესაძლებელია &:extend ბრძანების გამოყენებით, რომელიც არ ჩასვამს მიქსინს პირდაპირ კოდში, არამედ აფართოებს მოცემულ კლასს. მოდით გამოვასწოროთ ჩვენი კოდი:

.mix {
	width: 100px;
	height: 100px;
}
p {
	&:extend(.mix); 
	color: red;
}