Миксины в LESS

В этом уроке мы познакомимся с миксинами (примешиванием), позволяющим включать один класс во внутрь другого. Давайте разберемся, что это такое и как с ним работать.

По сути примешивание это использование одних классов внутри других, когда один класс является заготовкой - определенным кусочком кода, который мы можем использовать во многих местах.

Чем это удобно? На чистом CSS нам бы пришлось набирать заготовку кода везде где она понадобятся, а в LESS можно написать его в одном месте и за тем подключать его в нужные места кода.

Давайте посмотрим на примере. Пусть у нас есть следующий класс:

.mix { width: 100px; height: 100px; }

Давайте используем этот класс в качестве примешивания:

p { .mix; color: red; }

В результате после компиляции в абзац подставятся стили нашего класса:

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

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

.mix { color: white; background: black; } p { .mix; width: 300px; }