Menu
X

CSS dinâmico com LESS

Já imaginou poder declarar variáveis, implementar funções e mixins em suas folhas de estilo? Este é objetivo principal da biblioteca LESS: ampliar o funcionamento do CSS, tornando-o altamente dinâmico.

Imagem post: CSS dinâmico com LESS

O desenvolvimento front-end nunca esteve tão dinâmico. Ferramentas como HAML, SASS e ZenCoding vêm revolucionando a maneira como trabalhamos. Em projetos onde qualquer coisa pode mudar a qualquer hora, flexibilidade é um ponto importantíssimo.

O LESS chega nesse barco, adicionando um alto nível de personalização e permitindo recursos de programação em folhas de estilo estáticas. Com a biblioteca, é possível utilizar recursos como variáveis, funções, operações e escopo dentro de simples regras CSS.

Variáveis

Uma das principais funcionalidades do LESS é a criação de variáveis.

@azul: #4ca5fe;
@cor_link: #df0d32;
@fonte_titulo: bold 25px/25px "Georgia", "Times New Roman", serif; 

Variáveis servem para definir valores padrões para seus projetos e facilitar a manutenção e alteração dos mesmos. As variáveis acima poderiam ser utilizadas em diferentes estilos, por exemplo:

.titulo {
    color: @azul;
    font: @fonte_titulo;
}

.li {
    color: @azul;
}

.li a {
    color: @cor_link;
}

Mixins

Mixin é um conceito de programação orientada a objetos e basicamente representa a utilização de classes dentro de classes. Essas classes não são instanciadas e servem apenas para reaproveitamento de código.

No LESS, mixins são classes/declarações que serão utilizadas dentro de outras classes de estilo.

.fonte-titulo{
    font-size: 36px;
    font-family: Helvetica, Arial, sans-serif;
    color: #666;
    letter-spacing: -2px;
    font-weight: 700;
}

h1 {
    text-transform: uppercase;
    .fonte-titulo;
}

h2 {
    .fonte-titulo;
    color: #000;
}

Variáveis e mixins são as principais ferramentas para evitar uma terrível prática: repetição de código (no nosso caso, repetição de estilos).

Funções

Estendendo o conceito acima, funções são mixins que recebem parâmetros. Os parâmetros podem ter um valor padrão, como o exemplo borda_arredondada abaixo (6px), que será utilizado caso nenhum parâmetro seja passado.

.titulo(@azul){
    color: @azul;
    border: 1px dotted @azul;
}

.borda_arredondada(@radius: 6px){
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}

.thumbnail{
    background: #ccc;
    .borda_arredondada(10px);
}

.foto_materia{
    background: #000;
    padding: 4px;
    .borda_arredondada;
}

Regra dentro de regra dentro de regra…

Alguns desenvolvedores já aplicam essa técnica visualmente. No entanto, com LESS, as regras aninhadas também herdam os valores de seus “pais”.

#menu {
    letter-spacing: -2px;
    color: @azul;

    .item {
        padding: 2px;
        margin: 2px;
    
        &.inactive {
            color: #666;
        }

        &:hover {
            color: red;
        }
    
    }

}

Note o símbolo “&” que representa a concatenação. O elemento não herda simplesmente os atributos de seu antecessor, ele também sobrescreve o novo valor. Essa regra é importantíssima para pseudo-elementos como :hover, :focus etc.

Operações

O LESS também permite operações com valores e cores. Por exemplo, é possível multiplicar uma cor hexa-decimal ou dividir uma certa quantidade em pixels.

As funções de cores englobam efeitos como dessaturação e fade.

Para valores compostos, como o border do div#conteudo abaixo, é obrigatório o uso de parênteses.

@borda_padrao: 6px;
@cor_padrao: #111;

div#conteudo {
    color: @cor_padrao * 2;
    border: (@borda_padrao / 3) solid #ccc;
}

div#menu { 
    color: darken(@cor_padrao, 10%);
}

Na documentação oficial do LESS você encontra uma lista completa das funções para cores.

Escopo & Namespace

Para quem já programa, os conceitos explicados até agora são familiares. O LESS nada mais é do que um framework que transforma o CSS em uma pseudo linguagem de programação.

Escopo é outro conceito importante em programação que também está presente no LESS.

Uma variável possui um escopo global e outro local, dentro de sua função/mixin. O LESS vai sempre procurar primeiro por varáveis no escopo local e depois em seus antecessores.

@variavel: 1px;

div#conteudo {
    @variavel: 2px;
    div#titulo {
        border-size: @variavel;
    }
}

div#menu {
    border-size: @variavel;
}

Você também pode reutilizar apenas uma parte de um mixin aplicando um namespace para encapsular seu código.

#titulo {
    .principal {
        font-size: 36px;
        letter-spacing: -2px;
    }
    .secundario {
        font-size: 24px;
        letter-spacing: -1.4px;
    }
}

#header h1 {
    color: #df0d32;
    #titulo > .principal;
}

O h1 do elemento #header herda apenas o .principal do #titulo.

Implementações

A implementação do LESS pode ser feita on the fly, com JavaScript. Esse método é recomendado para sites pequenos, com pouca audiência. Para sites mais visitados, pré-processe seus arquivos LESS, transformando-os em folhas de estilo estáticas.

Por exemplo, para aplicativos Ruby/Rails existe uma gem que converte arquivos LESS para CSS. Já o o módulo compressor do Django oferece suporte nativo.

Screenshot do aplicativo LESS para Mac OS

Outra solução bacana é o aplicativo LESS para Mac.

E se você procura elementos básicos já prontos, a dica é visitar o site Less Elements. Nele você encontra soluções para bordas, degradês e sombras.