Logotipo WebingPro.
Menu
Background Image
Voltar para a página anterior

Pre-processadores: um pouco sobre LESS.

Postado por Gabriel Ferreira em 11/06/2015 às 12:41

Background Image

Salve salve, aqui é “O Estagiário” hahaha pra esse post resolvi falar de um assunto que dei de cara aqui na WebingPro e até então nunca tinha ouvido falar: Pre-processadores CSS.

O que são pre-processadores CSS?

“Um pré-processador é um programa que recebe texto e efetua conversões léxicas nele. As conversões podem incluir substituição de macros, inclusão condicional e inclusão de outros arquivos.” by Wikipedia

É como um compilador, você escreve seu código CSS usando um pre-processador como LESS e ele “compila” o resultado em CSS “normal”.

Imagine o seguinte código:

Agora você precisa alterar essas cores em comum. Como é em LESS:

Além da possibilidade da aninhar os seletores, ai esta um exemplo de uso de variáveis em LESS. Existem outros pre-processadores CSS como SASS e Stylus, porem vou me ater ao LESS que é com qual eu trabalho e conheço melhor.

Como usar o LESS…

Beleza, agora como eu uso essa maravilha! Fácil, basta baixar o LESS, e adicionar no seu <head>

e como está no exemplo, você deverá salvar seu estilo com um .less no final. Feito isso inclua o less.js que você baixou na página (inclua logo abaixo do link de estilo).

Pronto, você ja pode fazer mágica com LESS :).

Existem também os Mixins, que são como funções, exemplo:

Aqui dizemos que @radius tem um valor default de 5px se nada for passado como parâmetro, como na div #header, ou é possível passar um parâmetro como no #footer.

Depois de compilado pelo less esse código ficaria assim:

Pode-se também fazer operações matemáticas com o LESS:

Como ficaria isso compilado:

Essas são as principais características do LESS. O lado ruim de você usar um pre-processador, é que é como crack, um caminho sem volta hahahaha. Sério, quando tenho que digitar CSS puro, fico só pensando no quanto seria mais fácil usar LESS.

 

Enfim, é isso ai galera, o que eu conheço, e o que ja li sobre LESS ta ai. Qualquer dúvida pode deixar um comentário que a gente te ajuda 🙂

Abraço e ate a próxima!

Conheça o autor do post

Gabriel Ferreira:
Notice: the_author_description está obsoleto desde a versão 2.8.0! Use the_author_meta('description') em seu lugar. in /home/webingpro/www/blog/wp-includes/functions.php on line 3830
Eu sou de aquário, adoro unicórnios e paçoca .. brink's, papo sério agora. Eu conheci programação com 15 anos, e desde então sou fascinado por software, aplicações e web. Aprendi JAVA no curso técnico, e PHP por conta, lendo livros e etc, em 2013 fui ao FISL (Fórum internacional de software livre) e conheci o Python, uma linguagem que ainda não domino, mas se tornou minha favorita.