<
Menu

Tableless


animation

CSS Transition e CSS Animation

svg

Imagens em alta resolução utilizando SVG

texto-texturizado

CSS3 – Texturizando textos

responsive

Responsive Web Design – Adaptação vs Otimização


Imagem post: CSS dinâmico com LESS

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.

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.

Por Davi Ferreira

Programador apaixonado pelo que faz. Responsável pelo desenvolvimento de sistemas e interfaces para Globo.com, Confederação Brasileira de Vôlei, Ricoh Brasil, Embratel entre outros.

http://www.daviferreira.com/blog

Mais posts do autor

Comentários (32)

  • Pedro

    O Lesss realmente é uma mão na roda, mas também tempos uma ferramenta disponibilizada pelo Google com o mesmo intuito: Closure StyleSheets

    http://code.google.com/p/closure-stylesheets/

    Existem várias maneiras de utilização dela igual ao less, compressão de código, otimização de seletores dentre outras opções, vale a atenção a ela também.

  • http://www.jusbrasil.com.br Shankar Cabus

    Tive um pouco de resistência pra usar o LESS por causa da compilação que sempre dava problema. Na verdade, até hoje preciso modificar (com um espaço) e salvar o arquivo que faz o @import de outros arquivos .less para este ser compilado.

    Mas usando o LESS fica muito mais fácil fazer modularizar o CSS e criar um bootstrap pro projeto. O código fica mais organizado, mais semântico e com um melhor reaproveitamento (utilização de mixins e namespaces).

    Enfim… acho difícil eu fazer mais algum projeto sem o LESS.

  • http://anestesya.posterous.com tadeu luis

    Realmente utilizar a LESS garante um incrível aumento no desenvolvimento, o que eu acho muito bom no trabalho com ela é a possibilidade de se trabalhar com módulos de CSS dentro dos arquivos através de imports.

    Eu escrevi um post no meu blog sobre como usar a Less com Media
    Queries.
    http://anestesya.posterous.com/less-css-media-queries-com-foco-em-dispositiv

    Parabéns pelo post, ficou muito bom!
    @anestesya

  • http://gabrielizaias.com Gabriel Izaias

    Também existe um programa que compila o arquivo .less pra .css no Windows: http://wearekiss.com/simpless

    Na verdade ele funciona em MacOS, Linux e Windows.

    Já estou usando à algum tempo e não tenho do que reclamar.

  • Paulo Griiettner

    Eu já uso o LESS a quase 1 ano e sou desenvolvedor Joomla. Para poder usa-lo em meus projetos, eu criei meu próprio template framework para Joomla com o Less funcionando. Eu prefiro usar a versão PHP do LESS (http://leafo.net/lessphp/), pois não evita mais uma chamada HTTP e também diminui incompatibilidades com browsers.

    Fiz uma modifcação básica no arquivo PHP que eu não precise usar o arquivo style.less e sim style.less.css. O motivo de eu ter feito isso, é que posso usar meu editor padrão para editar os arquivos css, pois com a extensão .less o editor não reconhecia os estilos.

  • http://dgmike.com.br Michael Granados

    Para amantes de linux/ubuntu, criei uma sequencia de comandos para rodar no terminal e assim instalar o {less}.

    Ele instala o node.js para poder “rodar” arquivos js no terminal. Instala o npm, que é o gerenciador de pacotes para node. E por último, instala o {less}.

    https://gist.github.com/1033253

    Assim você pode rodar o {less} pelo terminal, assim…

    lessc [arquivo_origem.less] [arquivo_destino.css]

    Atenção! Você precisa executar os comandos linha-a-linha, já que criar um arquivo com esses comandos não rola… ;D

    #ficadica

  • Cícero Santos

    Só é possivel usar less rodando no servidor? Já fiz os procedimentos de linkar o arquivo .less e o .js mas n~çao consigo testar.

    Todos os caminhos estão corretos, está tudo normal. Gostaria de saber se é preciso alguma configuração ou ambiente especial pra utilizar less.

  • Cícero Santos

    na verdade o less aqui só está funcionando no firefox … alguém passou por isto?

  • http://wilsoncsousa.com.br Wilson Carlos

    Excelente artigo, estudarei mais sobre o assunto para aplicar em meus projetos. Mas fica uma pergunta: Está funcionando em todos os navegadores?

  • Rafael Guedes

    Muito bom isso… eu como programador nao saco muito de front end… agora com esse conceito vai ficar mais facil pra mim o entendimento.

  • http://wagnermoreira.net Wagner

    REALMENTE MARAVILHOSO! ja estou usando ele! OTIMO POST PARABENS!!!

  • Cícero dos Santos Libório

    Eu usei o Less e realmente a produtividade é incrementada a níveis absurdos. Mas, não consigo usar imagens de fundo com o atributo background do css resolvi descartar o uso …

  • carlos

    Uma dúvida , como fica a questão da compatibilidade ? usando less será que a compatibilidade com o IE melhora? 
    O css ja é uma linguagem de poder supremo em questão de agilidade na formatação de inumeros documentos em cascada , será que utilizando less , o código css não ficaria mais sujo ? ou será que a agilidade sob o dominio de funções ou variáveis vai agilizar nosso trabalho? 

  • Gabriel-bau1

    muito bom, eu como novo no assunto e bem mais fácil assim o q o normal

  • Foxwnobr

    eu tenho um servidor com o ubuntu rodando nele ja tenho o .less ativado nele
    mais eu tenho uma pergunta como eu faço para que o servidor faça de maneira altomatica a trans formação dos arquivos de less para css sem precisar ficar digitando toda vez
    lessc styles.less > styles.css

  • Fernando Resende

    Muito Bom

  • http://www.facebook.com/caiokoiti Caio Koiti Kaihara

    se não me engano no site do less tem um JS que faz este trampo ai!

  • http://twitter.com/rafaelhbarreto Rafael Barreto

    Excelente!

  • http://rickbenetti.com Rick Benetti

    O Less é somente uma forma para quem já sabe codar CSS fazê-la mais rápido, compatibilidade não tem nada haver Carlos.
    Sobre ficar sujo o código ele ficará se você já não souber codar CSS corretamente, afinal ele vai gerar um CSS conforme sua forma de codar CSS.
    Sobre agilidade, sim ele agiliza e muito a forma de codar por conta de Mixis, Variáveis e funções, eu mesmo a cada dia aprendo uma coisa nova ou uma forma melhor de codificar.

  • Rafael Dutra

    Com certeza o LESS diminui o código escrito. Mas pode deixar o CSS maior do que deveria.

    Além disso, ter que ficar compilando, e depois corrigindo o arquivo final é fd,

    Pra quem sabe CSS, a ideia dos Mixins é “trocar 6 por meia-dúzia”. Afinal as TAGS podem ser associadas a inúmeras classes. Nesse caso o código escrito não diminui, mas a maneira de pensar é que muda.

    Enfim, não me sinto confortável em organizar Orientado a Objetos uma linguagem em Cascata.

  • http://www.facebook.com/fred.wuerges Frederico Wuerges Becker

    Independente dá área ou tecnologia; quando não se sabe usar determinada ferramenta, há a possibilidade de acabar fazendo merda. A mesma coisa se aplica ao LESS, se você não sabe como definir os seletores da maneira correta, vai acabar gerando código desnecessário.

    Você não precisa compilar o LESS manualmente, há várias ferramentas que automatizam a compilação. Por exemplo, eu uso o WinLess para Windows.

    Concordo com você em partes: o risco de se ter CSS repetido por causa dos mixins é muito alto. Já vi algumas situações de vícios de utilização de mixins desnecessários, onde poderiam ter utilizado combinações de classes.
    Mas não pense que você vai ter uma declaração de CSS em sua aplicação inteira, os mixins facilitam essa questão.

    Eu estou usando o LESS a algumas semanas, com a experiência que tive nesse tempo, consigo perceber que tive benefícios tanto em produtividade como organização do código. Além de também o WinLess me poupar uma parte do deploy dos meus projetos: a minificação dos CSS’s.

  • Erick Ribeiro

    simplesmente ridículo e uma perca de tempo.

  • Pingback: Twitter Bootstrap - Layout bonito em menos tempo | Blog do Wallace Silva

  • Pingback: Grids semânticos com LESS - Tableless

  • http://www.facebook.com/people/Hendrik-Jan-Monshouwer/100000953304392 Hendrik-Jan Monshouwer

    wow thank you !

  • Diego Souza

    No exemplo de “Funções” acredito que deveria usar o nome @cor para o parâmetro ao invés de @azul, pois teoricamente a pessoa pode passar como parâmetro qualquer cor:

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

  • Vinícius Moraes de Araújo

    Respeito sua opinião, mas sinceramente falar que é ridículo e perda de tempo, só se você trabalha com projetos pequenos ou não liga para organização do seu código.

  • Vinícius Moraes de Araújo

    Sim, ele não implica no funcionamento pois no final ele vai gerar um arquivo .CSS, ou seja, se não estiver funcionando em algum navegador a culpa não é do LESS e sim do seu código.

  • http://twitter.com/brunomorejon Bruno Morejon

    Maravilha! Já estou usando LESS em meus projetos.

  • Pingback: Dica para CSS (Usando SASS ou LESS)

  • Jony Fernando Schulz

    Muito bom o artigo brow. Abraço

  • Valdecir Junior

    Less não é um Framework, e sim um pré-processador, um bom compilador para o Windows é o Koala, que também compila Sass.