АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
⊗mkLsBsCE 19 of 41 menu
Новая рубрика! Интервью с моими учениками. Они расскажут, как искали работу и дадут ценные советы. Заходите:)

Расширение классов в 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; }

Расскажите, каким будет результат компиляции следующего кода:

.mix { color: red; font-size: 20px; } p { &:extend(.mix); width: 300px; }

Расскажите, каким будет результат компиляции следующего кода:

.mix { color: red; font-size: 20px; } #block p { &:extend(.mix); width: 300px; }

Расскажите, каким будет результат компиляции следующего кода:

.mix { color: red; font-size: 20px; } #block p, #block div { &:extend(.mix); width: 300px; }

Расскажите, каким будет результат компиляции следующего кода:

.mix { color: red; font-size: 20px; } #block { width: 300px; p { height: 100px; &:extend(.mix); } div { height: 200px; &:extend(.mix); } }

Расскажите, каким будет результат компиляции следующего кода:

.mix1 { color: red; } .mix2 { font-size: 20px; } div { width: 300px; &:extend(.mix1); &:extend(.mix2); }
enru