# Расширение классов в 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); }`
← →
↑