Примеси
Примеси (англ. mixin) позволяют добавлять существующие стилевые правила к другим селекторам. Это сокращает код, поскольку нам уже нет смысла повторять один и тот же фрагмент кода несколько раз, достаточно сослаться на него в нужном месте. Примеси в этом плане похожи на функции в языках программирования.
Примеси в Less это обычные селекторы классов или идентификаторы. В примере ниже мы создаём два класса — left-mixin и right-mixin для выравнивания элементов, соотвественно, по левому или правому краю веб-страницы. Если нам требуется повторить свойства у другого селектора, то мы пишем имя класса с точкой впереди — .left-mixin или .left-mixin(). Для идентификатора вызов будет как #left-mixin. Круглые скобки пишутся по желанию, они в данный момент не играют роли.
.left-mixin { float: left; margin: 0 10px 10px 0; } .right-mixin { float: right; margin: 0 0 10px 10px; } .img-left { .left-mixin; background: #f0f0f0; padding: 10px; } .img-right { .righ-mixin; background: #f0f0f0; padding: 10px; }
На выходе мы получим такой стиль:
.left-mixin { float: left; margin: 0 10px 10px 0; } .right-mixin { float: right; margin: 0 0 10px 10px; } .img-left { float: left; margin: 0 10px 10px 0; background: #f0f0f0; padding: 10px; } .img-right { float: right; margin: 0 0 10px 10px; background: #f0f0f0; padding: 10px; }
Заметьте, что повторяющиеся свойства не группируются по селекторам и в коде остались наши классы left-mixin и right-mixin. Если они сами по себе не требуются и нужны лишь для вызова в других местах, то их можно убрать из CSS, добавив к имени класса круглые скобки. В остальном никаких изменений нет.
.left-mixin() { float: left; margin: 0 10px 10px 0; } .img-left { .left-mixin; background: #f0f0f0; padding: 10px; }
В CSS останется только следующее:
.img-left { float: left; margin: 0 10px 10px 0; background: #f0f0f0; padding: 10px; }
Скобки в примесях нужны ещё и для передачи в них переменных, как показано ниже.
.animation(@name, @time, @time-fun) { animation: @name @time @time-fun; -webkit-animation: @name @time @time-fun; } body { background: url(images/city.png) repeat-x 0 100% fixed, linear-gradient(to top, #5080b1, #004e8c) fixed; .animation(city, 30s, infinite); }
Мы используем примесь с именем animation и передаём ей три переменные, которые подставляются в качестве параметров свойств animation и -webkit-animation. На выходе получим следующий код CSS:
body { background: url(images/city.png) repeat-x 0 100% fixed, linear-gradient(to top, #5080b1, #004e8c) fixed; animation: city 30s infinite; -webkit-animation: city 30s infinite; }
Таким образом, примеси удобно использовать для свойств, которые работают в браузерах с префиксами. Это позволяет избежать ошибок при копировании значений, т. к. они заменяются компилятором автоматически.
См. также
Руководство по примесям