Introdução
Tenho certeza absoluta que o PostCSS vai estar cada vez mais presente no nosso dia a dia, já que é absolutamente fantástico e pode ser usado de várias formas, inclusive junto com o pré-processador da sua preferencia, ou seja, a escalabilidade é total.
Muitas ferramentas já estão utilizando o PostCSS, um exemplo é o grid-system Lost, desenvolvido pelo mesmo criador do super conhecido Jeet.
Porém o foco desse artigo é o Rucksack.
O que é?
Quem me mostrou essa ferramenta foi o Milson Junior e desde então fiquei fascinado com algumas coisas que ela oferece.
Rucksack é um pacote de funcionalidades que pode ser usado em qualquer pré-processador, com o PostCSS ou até mesmo ser injetado diretamente no Stylus.
Um detalhe importante, é que seu CSS gerado não terá nenhum código extra.
Instalação
Vou mostrar uma configuração utilizando o Grunt + Stylus, mas é possível ver todas as configurações aqui.
Baixe o PostStylus e o Rucksack.
$ npm install --save poststylus rucksack-css
Em seguida crie uma função para utilizar o PostCSS na sua configuração do Stylus no Grunt:
var rucksack = require('rucksack-css');
var postcss = function(){
return require('poststylus')(['rucksack-css']);
}
Caso queira utilizar outra ferramenta em PostCSS, como o Lost, também deve chamar dessa forma, por exemplo:
var postcss = function(){
return require('poststylus')(['rucksack-css', 'lost']);
}
Depois é só chamar no use
do Stylus dentro do seu Gruntfile:
stylus: {
dev: {
options: {
use: [postcss],
}
}
}
Opções
É possível habilitar ou desabilitar algumas opções do Rucksack. Por padrão apenas as opções de autoprefixer e fallbacks ficam desabilitadas.
Fallbacks
Adiciona compatibilidade de algumas propriedades para navegadores antigos.
Por exemplo:
.foo
opacity 0.8
Vai gerar:
foo {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: 0.8;
}
Autoprefixer
Faz a mágica de adicionar prefixos automaticamente para você, e sempre se baseando na tabela mais atualizada do CanIUSe.
Por exemplo:
.foo
display flex
Vai gerar:
.foo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
Como acho essas funções importantes, deixei ambas habilitadas.
var postcss = function() {
return require('poststylus')([rucksack({
autoprefixer: true,
fallbacks: true
})]);
}
Features
Agora vou fazer um breve resumo das funcionalidades que achei mais relevantes.
Responsive Typography
De longe é o que mais me impressionou. É simplesmente incrível!
Suas fontes ficarão responsivas automaticamente, não é magia nem JavaScript, é apenas CSS.
Pode ler toda a documentação aqui, mas estou usando da seguinte forma:
Como utilizo REM, defino no HTML um range entre 7px e 10px.
html
font-size responsive 7px 10px
E pronto!
O motivo de ser entre 7px e 10px, é que assim posso usar o REM como se fosse pixel, ou seja, 1.6rem = 16px. Então consigo ter mais controle na fidelidade das fontes.
Travando o minimo em 7px, garanto que as tipografias vão diminuir no máximo 3px, então elas vão ficar em um tamanho adequado para dispositivos menores.
Shorthand Positioning
Outra mão na roda, sabe quando a gente precisa deixar um elemento absoluto ou fixo e quer que ele ocupe todo o espaço?
Basta fazer isso:
.foo
position absolute 0
E você terá isso:
.foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Property Aliases
Tem preguiça de escrever o nome completo de alguma propriedade?
Crie um alias!
@alias
fs font-size
.foo
fs 16px
Para ter isso:
.foo {
font-size: 16px;
}
Font Src Expansion
Sabe aquelas funções que criamos no pré-processador para gerar nosso font-face mais facilmente? É coisa do passado, agora podemos usar “nativamente”.
@font-face
font-family 'My Font'
font-path '/my/font/file'
font-weight normal
font-style normal
E vai gerar o código completo:
@font-face {
font-family: 'My Font';
src: url("/my/font/file.eot");
src: url("/my/font/file.eot?#iefix") format('embedded-opentype'),
url("/my/font/file.woff") format('woff'),
url("/my/font/file.ttf") format('truetype'),
url("/my/font/file.svg") format('svg');
font-weight: normal;
font-style: normal;
}
All The Easings
Um pacote completo com transições incríveis.
Escreva:
.foo
transition all 250ms ease-in-cubic
E terá:
.foo {
transition: all 250ms cubic-bezier(0.55, 0.055, 0.675, 0.19);}
Chega de perder tempo entrando em sites para gerar o código pra você :)
Pode ver todas as transições aqui.
Conclusão
O Rucksack oferece features interessantes que podem agilizar muito nosso dia a dia.
Funcionalidades como a de Responsive Typography ou All The Easings são motivos mais do que suficientes para começar a usar o quanto antes.
E ai gostaram do artigo? Alguma consideração? Mandem ver nos comentários!