{ PostCSS }

Joan Leon

UI Developer at @SUIEngineers .

Collaborator of HTML5 Spain & DesarrolloWeb .

Teacher at Escuela IT

#HTML5

#CSS3

#Sass

#Animation

#Javascript

#P5js

#Processing

#Games

Ahora que me siento cómod@ con Sass* aparece otra herramienta...

* Sass | Less | Stylus

-Autoprefixer-

Usado por: Google, Shopify, Twitter, Bootstrap, Wordpress & Codepen

Autoprefixer

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use


a {
    display: flex;
}

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

Escribe CSS estándar


a {
    -webkit-border-radius: 5px;
            border-radius: 5px;
}

a {
    border-radius: 5px;
}

Sólo prefijos actuales

-Autoprefixer-

Qué no es PostCSS

  • No es un pre-procesador

  • No es un post-procesador

  • No es la sintaxis del futuro

  • No es un herramienta de Limpieza / Optimización

Qué es PostCSS

PostCSS es una herramienta para transformar estilos mediante plugins de JavaScript

PostCSS es un módulo de Node.js que analiza tu CSS y lo transforma en un  árbol de sintaxis abstracta (AST) .

 

Ese AST es interpretado y puede ser modificado mediante funciones o plugins JavaScript. Luego, PostCSS convierte nuevamente ese AST en texto, con el cual puede generarse un archivo de salida con un CSS modificado.

PostCSS

By Joan León

PostCSS

  • 1,410
Loading comments...

More from Joan León