Um pouco sobre pré-processadores de CSS

Não é novidade que os pré-processadores de CSS tornaram muito mais ágil o dia-a-dia de desenvolvedores web. Ferramentas como SASS, LESS e Stylus caíram rapidamente nas graças da comunidade, cada qual com seus recursos e particularidades que levaram – e levam – a intermináveis e acaloradas discussões em fóruns, eventos, meetups etc. O Stylus se destacou entre essas ferramentas por sua sintaxe diferenciada e sua poderosa API JavaScript.

Os recursos exclusivos oferecidos pelo Stylus deram a ele o fôlego necessário para sua luta contra o – quase onipresente – SASS e garantiram uma resposta da comunidade, que dia após dia tem disponibilizado plugins, libraries e artigos que dão ainda mais poder de fogo ao Stylus.

Conheça o Rupture

O Rupture surgiu como uma alternativa para usuários do Stylus ao já conhecido Breakpoint Slicer (SASS), mas mantendo o mesmo conceito: tornar mais simples a vida de quem precisa definir breakpoints. O plugin foi desenvolvido por Jeff Escalante, que ostenta um repositório repleto de utilitários para Stylus, como o (excelente) Axis. Jeff usou o conceito de block mixins para dar forma ao Rupture, que ainda tira vantagem da sintaxe simplificada do Stylus.

A instalação do Rupture não tem segredos e nem pré-requisitos além do Node/NPM, porém é importante lembrar que o Rupture é um plugin para Stylus e, por isso, o pré-processador também deve ser instalado.

$ npm install rupture

O grande diferencial do Rupture está justamente em sua simplicidade. Não existem segredos ou truques complexos. Sua documentação é bastante concisa e em poucos minutos um desenvolvedor sem muita experiência já estará familiarizado o suficiente para começar a montar páginas com diversos breakpoints. Para executá-lo, basta rodar o comando abaixo:

$ stylus -u rupture -w <arquivo>.styl

Scale

Uma das features mais legais do Rupture é sua variável scale. Com ela, é possível definir uma série de breakpoints de acordo com suas preferências de tamanho e quantidade. Os valores padrões são: rupture.scale = 0 400px 600px 800px 1050px

Cada valor acima pode ser alterado de acordo com sua necessidade. Além disso, todos eles possuem um número identificador próprio:

scale:    0    400px    600px    800px
scale #:  0      1        2        3

É possível também definir um nome para cada valor:

rupture.scale =        0        400px       600px      800px       1050px

//                     └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘
// Slice #:           1           2           3           4      
rupture.scale-names:       'xs'        's'         'm'         'l'

Mixins

São a alma do Rupture. Com eles, é possível definir uma boa variedade de breakpoints com uma excelente semântica e códigos simplificados. Os principais são:

+above(medida)
+below(medida)
+between(medida1, medida2)

Além de um segundo grupo que faz o uso da variável scale:

+at(medida)
+mobile() // <= 400px
+tablet() // 400px ~ 1050px
+desktop() // >= 1050px
+retina() // Para telas com densidade de pixels maior que 1.5

Exemplo de uso:

.abox
	width 500px
	height 500px
	background #f00
	+above(600px)
		background #0f0
	+above(1000px)
		background #00f

O Rupture ainda tem uma boa lista de variáveis que incrementam suas funcionalidades, como rupture.enable-em-breakpoints, que converte automaticamente as medidas de pixels para em, e rupture.anti-overlap, que permite a configuração exata do overlap em seus breakpoints.

Porque usar o Rupture? Produtividade e diversão

Por sua simplicidade, o Rupture não demanda um grande tempo de adaptação e, se você já escreve muitas media queries, sem dúvidas ele fará uma enorme diferença em seu workflow, que se tornará mais veloz e divertido!

Lembre-se sempre de que ferramentas como essa só serão realmente úteis se forem usadas dentro do contexto do projeto ao qual serão aplicadas – ter pressa em utilizá-las pode transformar qualquer projeto simples em uma tremenda dor de cabeça. O importante é se divertir!