Introdução

Como assim dar poder ao CSS?! Vou precisar ser mordido por um CSS radioativo para ter esses poderes?! Nada disso, vem comigo que eu te mostro. O CSS é relativamente fácil de aprender, mas muito dificil de se manter, dificil de escalar e modularizar. Os pré processadores vieram para ajudar um pouco com isso, possibilitando o uso de variáveis, mixins e funções no nosso CSS! Vamos ver como isso tudo funciona?!

Instalação

Para inicio de conversa vamos precisar do NodeJS, Caso ainda não tenha instalado (que eu duvido muito) basta Fazer Download e instalar! Com o Node instalado vamos abrir o nosso terminal e digitar o seguinte comando.

$ npm install stylus -g

Pronto! Agora temos o Stylus no nosso ambiente!

Como Usar

Crie um diretório onde vai ficar seu arquivo stylus, exemplo stylus/main.styl, lembrando que a extensão do arquivo tem que ser .styl. Agora vamos criar o diretório para onde vai o nosso CSS compilado, por exemplo css/. Para que o nosso arquivo stylus seja compilado, precisamos “assistir” ele, vamos fazer isso com o comando

$ stylus -w stylus/main.styl -o css/

o -w assiste o arquivo main.styl e o -o mostra o caminho para onde vai o arquivo compilado.

Seletores

Uma peculiaridade do stylus é que não é obrigatório usar chaves {}, dois pontos : nem ponto e virgula ; na hora de escrever seu CSS, mas ainda sim você pode usar sem problemas, com ou sem ele será compilado da mesma forma.

Parent Reference (Referência pai) é uma feature bem legal do stylus, onde podemos fazer referencia ao elemento pai usando o &:

Exemplo

See the Pen Parent Reference example by Cleyson Leal (@Cleyson) on CodePen.

Variáveis

Sim! O stylus da o poder das variáveis ao CSS, para usar a variável basta escrever o nome da variável seguido do sinal de = e o valor.

Exemplo

See the Pen variaveis stylus example by Cleyson Leal (@Cleyson) on CodePen.

Mixins

Mixins e funções são bem parecidos, setados da mesma forma mas usados de formas diferentes. Podemos usar o mixin como no exemplo

Exemplo

See the Pen Mixin stylus example by Cleyson Leal (@Cleyson) on CodePen.

Quando border-radius () é invocada dentro de um selector, as propriedades são expandidas e copiadas para o seletor, assim facilitando a vida na hora de usar prefixo por exemplo :D

Funções

Pra quem conhece linguagem de programação já esta mais que acostumado com funções, agora podemos escrever funções no nosso CSS!

Exemplo

See the Pen Function stylus example by Cleyson Leal (@Cleyson) on CodePen.

O stylus ainda tem muita coisa legal que não citei no post, vou deixar leituras complementares para quem quiser se aprofundar e virar um mestre em stylus! ;)

Documentação do Stylus
Série sobre Stylus feito pelo Fernando Daciuk
Série em video sobre Stylus do LvlUp tutorials (Inglês)