PostCSS x Sass

O que é esse negócio de PostCSS que tá na moda?

Pré-processadores

/* usando sintaxe padrão */
body
{
color: white;
}
/* usando sintaxe otimizada */
body

color: white
/* usando sintaxe sem pontuações */
body

color white
body {
color: white;
}
/* ou, se você gerar um build minificado */
body { color: white }

Pós-processadores

Qual a diferença?

Por que eu comecei a usar?

1 — Autoprefixing

/* https://css-tricks.com/snippets/sass/mixin-prefix-properties/ */
@mixin prefix($property, $value, $prefixes: ()) {
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: $value;
}

// Output standard non-prefixed declaration
#{$property}: $value;
}
/* handmade */
@mixin autoprefixer($prop, $value) {
#{'-webkit-' + $prop}: $value;
#{'-moz-' + $prop}: $value;
#{'-ms-' + $prop}: $value;
#{'-o-' + $prop}: $value;
#{$prop}: $value;
}

2 — Utilizar specs novas

E você, quando vai começar a usar?

Human, front-end developer, amateur musician, writer and speaker; problem solver. https://jlozovei.dev

Human, front-end developer, amateur musician, writer and speaker; problem solver. https://jlozovei.dev