Introdução ao LESS

13:19 0 Comments

Se você utiliza CSS diariamente deve gostar de como ele facilita sua vida e ajuda na manutenção do layout da sua aplicação. Embora ele seja uma tecnologia fantástica ainda existem pontos de melhoras, e para isso existem algumas ferramentas sendo uma delas o LESS. Nesse artigo vamos ver algumas das funcionalidades dessa ferramenta.

O que é o LESS?


O LESS é um preprocessador de CSS, ou seja, você escreve seu CSS utlizando as funcionalidades do LESS e ele transforma seu código em CSS para que o navegador 'entenda'.

Como utilizar o LESS?


Abaixo está um exemplo de como utlizar o LESS diretamente no html.

Se você utiliza o Visual studio então existe uma outra forma que é instalar o Web Essentials

Vamos conhecer as funcionalidades principais do LESS:

Variáveis


Sim, você leu certo variáveis!

Assim como em programação você pode definir variáveis e reutiliza-las em todo o CSS, desta forma se for necessário mudar o valor você pode fazer isso em apenas um lugar.



@corPrincipal: #5B83AD; /* Declaração da variável */

#header {
  color: @corPrincipal; /* Utilização da variável */
}

Reutilização de código


É possível declarar estilos no formato de classe CSS e retuliza-los:


.bordaPadrao { /* Definindo estilo a ser reutilizado */
  border: 1px solid black;
}

#imagem{ 
  .bordaPadrao; /* Reutilizando 1 */
}

.quadroDestaque {
  color: red;
  .bordaPadrao; /* Reutilizando 2 */
}

Hierarquia


Com o LESS você pode definir uma hiearquia mais clara no css. Por exemplo observe o código abaixo:


#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}


O código acima pode ser traduzido para a seguinte forma:


#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Muito mais legível e organizado.


Conclusão


Além das funcionalidades que eu aprentei aqui ainda existem outras que podem ser encontradas no site oficial: http://lesscss.org/features/

0 comentários: