Pré-Processadores

CSS


Benefícios instantâneos:


  • variáveis
  • aninhamento
  • imports
  • mixins & extensões
  • funções
  • operações matemáticas & lógicas



Malefícios instantâneos:


  • ambiente
  • compilação
  • debug


ok. Mas qual?



Sass é mais legal [1]  [2]  [3]


Less é menos burocrático [node.js]




less talk


More "less"

Variáveis



variáveis


interpolação

Aninhamento



Aninhamento


"&"

aninhamento


media queries

Imports




imports


ordem

imports


media queries


mixins



mixins


parametrizado

mixins


extensão

Operadores e funções




contra #1


ambiente.

  1. Instalar node.js
  2. : npm install -g less
  3. : lessc style.less style.css


contra #2


compilação.

: lessc style.less style.css

"grunt-contrib-less"


contra #3


debug.



OBRIGADO

pré-processadores CSS

By Fellipe Cicconi

pré-processadores CSS

  • 184