Use LESS Mixins para reutilizar blocos de regras

Ao customizar temas acabamos trabalhando com muitas linhas de CSS. Algumas vezes repetimos conjuntos de regras para elementos diferentes. Por exemplo, em determinados pontos eu quero mostrar um ícone.

Vamos supor que o código que usamos para isso é algo assim:

.element:before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background-image: url('../images/icon.svg');
}

Continuando com a suposição, digamos que existam vários outros ícones para inserir. Todos com a mesma proporção, porém tamanhos diferentes. Uma forma para não precisar ficar repetindo as propriedades é usar mixins. Primeiro, criamos o mixin com os parâmetros que preciso e substituindo a parte que vai variar por uma variável:

.icon-before(@_icon-url, @_icon-size) {
    content: '';
    display: block;
    width: @_icon-size;
    height: @_icon-size;
    background-image: url('@{_icon-url}');
}

Ah! E você pode criar um arquivo apenas para colocar os seus mixins, organizando melhor o seu tema.

Agora, como usamos aquele mixin? Simples: basta referenciá-lo na classe, como abaixo:

.element-featured {
    .icon-before('../images/icon-featured.svg',80px);
}
.element-secondary {
    .icon-before('../images/icon-secondary.svg',50px);
}

Legal, não é?

E tem mais! Podemos definir valores padrão para usar nos mixins. Assim, caso algum valor não seja passado, será usado o padrão que você definiu.

//variables file
@icon-default-url: '../images/icon-default.svg';
@icon-default-size: 40px;

//component lib file
.icon-before(
    @_icon-url: @icon-default-url,
    @_icon-size: @icon-default-size
) {
    content: '';
    display: block;
    width: @_icon-size;
    height: @_icon-size;
    background-image: url('@{_icon-url}');
}

Uma outra forma para escrever o valor da propriedade background-image seria e(%('url(%a)', e(@_icon-url))). Achei semelhante ao sprintf do PHP. Ficaria assim:

.icon-before(
    @_icon-url: @icon-default-url,
    @_icon-size: @icon-default-size
) {
    content: '';
    display: block;
    width: @_icon-size;
    height: @_icon-size;
    background-image: e(%('url(%a)', e(@_icon-url)));
}

Quer saber mais sobre os padrões de código do LESS no Magento? Dá uma olhada aqui na documentação: LESS coding standard: Mixins.

Sobre a imagem que ilustra o post

Esta pintura chama-se “Wheat Field with Cypresses” (Campo de trigo com ciprestes). Cipreste é um nome genérico para um grupo de árvores coníferas bastante utilizadas em projetos de paisagismo. As coníferas são bastante comuns no hemisfério norte. Este quadro foi pintado em 1889 por Vincent van Gogh, durante a sua estadia em Saint-Rémy, França.
Esta imagem foi retirada do acervo do The Metropolitan Museum of Art.