Less - Mixins - Funções em CSS

Vamos falar um pouco sobre mixins em pré-processadores, para esse artigo utilizarei Less, mas o conceito para outros pré-processadores é o mesmo.

Mixins funcionam de forma semelhante a funções em linguagens de programação, onde você pode defini-las e reutilizá-las quando necessário sem a duplicação de código, podendo passar parâmetros para o uso interno da função, os mixins funcionam da mesma maneira. Demonstrarei o básico sobre mixin, mas pode ser feito muito mais.

Por exemplo, se queremos definir um border-radius para duas classes diferentes, com CSS puro faríamos o seguinte:

.loginBox {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.button {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Definindo um Mixin

No nosso exemplo isso tornaria uma repetição de código desnecessária, para resolver isso podemos utilizar mixins com Less, como já falei funciona de forma semelhante a funções, então primeiramente definimos nosso mixin:

.border-radius() {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Veja que a sintaxe é parecida com a definição de uma função. Com o mixin definido, basta chama-lo nas classes onde gostaríamos que tenha essas regras de border-radius:

.loginBox {
    .border-radius();
}
.button {
    .border-radius();
}

O resultado após processar o Less, será gerado um CSS identico ao do primeiro exemplo, mas para nós que estamos desenvolvendo será algo bem mais limpo e reutilizável.

Parâmetros

Porém nesse nosso exemplo todas as classes teriam 10px de border-radius, o que seria ruim ter que definir vários mixins com valores diferentes. Mas os mixins permitem passarmos parâmetros para nosso mixin, assim como nas linguagens de programação, e com esses parâmetros definidos, podemos utilizá-los dentro do mixin.

.border-radius(@valor) {
    -webkit-border-radius: @valor;
    -moz-border-radius: @valor;
    border-radius: @valor;
}

Agora basta passar o valor desejado em cada classe, que irá gerar o mesmo CSS porém com valores diferentes em cada classe.

.loginBox {
    .border-radius(10px);
}
.button {
    .border-radius(20px);
}

Também podemos definir um valor padrão para os parâmetros, caso não seja informado na chamada do mixin será usado o valor padrão, não obrigando passar parâmetros:

.border-radius(@valor: 5px) {
    -webkit-border-radius: @valor;
    -moz-border-radius: @valor;
    border-radius: @valor;
}

Podemos passar diversos parâmetros para um mixin, assim podemos criar um conjunto de regras bem elaborado onde poderá ser reutilizado diversas vezes por classes ou ids distintos definindo valores diferentes para cada um, como por exemplo:

.titles(@size: initial, @color: #000000, @align: center) {
    font-size: @size;
    color: @color;
    text-align: @align;
}

/* Exemplos de regras para títulos diferentes */
h1 {
    .titles(18px, #000000, left);
}
h2 {
    .titles(16px, #FF0000, center);
}

Conclusão

Trabalhar com mixins é uma mão na roda, limpa o código, facilita a leitura, e o mais importante, evita repetição desnecessário de código, assim quando necessário alterar uma regra de CSS, não será preciso alterar em todas as classes onde são utilizadas, basta alterar no mixin, isso elevará o CSS a um nível mais alto e profissional.