:root {
--size: 90%;
--fontSize: 20px;
--lineH: 26px;
--colorFT: #271764;
--colorBG: #E1DCE3;
--padding: 40px;
--margin: 50px;
--fontF: -apple-system,BlinkMacSystemFont,sans-serif;
}
.foo {
display: block;
font-size: var(--fontSize);
font-family: var(--fontF);
line-height: var(--lineH);
margin: var(--margin) auto;
width: var(--size);
color: var(--colorFT);
background-color: var(--colorBG);
padding: var(--padding);
box-sizing: border-box;
}
@media only screen and (min-width: 64em) {
.foo {
--size: 40%;
--fontSize: 30px;
--lineH: 36px;
--colorFT: #242424;
--colorBG: #E4A824;
}
}
postCSS REVOLUTION
¡Buenas tardes!
Me llamo Jorge Aznar y trabajo como front en Hiberus Internet.
¿postCSS?
“PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.”
postCSS vs SASS
NOOOOOOO!!!
postcss
love
SASS - LESS - STYLUS
preCSS
Utilizando SASS con postCSS
- postcss-mixins
- postcss-advanced-variables
- postcss-partial-import
- postcss-color-function
- postcss-nesting
- postcss-nested
- postcss-extend
- postcss-selector-not
postCSS NO es un preprocesador
puede convivir con tu preprocesador favorito como SASS & LESS
postCSS NO es un postprocesador
It is time admit my mistakes. “Postprocessor” term was bad. PostCSS team stoped to use it.COMO TRABAJA POSTCSS
LANZANDO POSTCSS
VENTAJAS
Modular y flexible
Tenemos la oportunidad de crear nuestra propia herramienta de trabajo y adaptarla a cada proyecto.
“Someone asked @andreysitnik why you make @PostCSS He answered becouse I pull request to compass CSS and they didn't ansewred me.”
“@andreysitnik @PostCSS so I decided to destroy them.”
Rápidez
| Procesadores CSS | Velocidad |
|---|---|
| postCSS | 39ms |
| Rework | 79ms |
| libsass | 179ms |
| LESS | 179ms |
| STYLUS | 269ms |
| Ruby SASS | 1101ms |
Comunidad
Más de 200 plugins
Utilizado por Google, Twitter, Alibaba y Shopify
Popularidad
18.347.510 de descargas totales
Más de 2.000.000 de descargas mensuales
Plugins
- Packs
- Future CSS Syntax
- Fallbacks
- Images and Fonts
- Grids
- Optimizations
“However, developers are generally no interest in trying out things they can't use in production.”
Lea Verou in CSS Secrets
“La vida es eso que pasa mientras los navegadores deciden dar soporte a las nuevas funcionalidades de CSS. ”
Jorge Aznar antes de conocer CSSNEXT
Use tomorrow’s CSS syntax,
TODAY.
CSSNEXT
custom properties
¿Que son las custom-properties?
También mal llamadas CSS variables
:root {
--colorico: navajowhite;
}
h2 {
color: var(--colorico);
}Las custom properties pueden ser globales o 'locales'
//Globales
:root,
html,
body {
--colorico: navajowhite;
}
//Locales
.foo {
--paddingCC: 20px;
padding: var(--paddingCC);
}Puedes ser modificadas con JavaScript
Update CSS Variables with JSPuedes ser modificadas en los Media Queries
DEMO!SOPORTE!
CSSNEXT
custom media queries
//Definimos el custom media querie
@custom-media --ipad (width => 48rem);
//Declaramos el custom media querie
@media (--ipad) {
body {
display: none;
}
}CSSNEXT
custom selectors
//Definimos el selector
@custom-selector --encabezados h1, h2, h3, h4, h5, h6;
--encabezados { font-family: -apple-system,BlinkMacSystemFont,sans-serif; }automatic vendor prefixes fixes
reduced calc()
nesting
color()
function hwb()
function gray()
function #rrggbbaa colors
rgba function (rgb fallback)
rebeccapurple color
font-variant property
filter property (svg fallback)
initial value
rem unit (px fallback)
:any-link pseudo-class
:matches pseudo-class
:not pseudo-class (to l.3)
::pseudo syntax (: fallback)
postCSS-sorting
Ordenando tus propiedades de CSS con CSSCOMB, Yandex y Zen
“Friendly reminder that CSS declaration sorting (no matter how) helps gzip perform better.”Hugo Giraudel Aumentando la compresión GZIP de CSS
Bootstrap
CSS sin ordenar: 19.690 bytes
CSS ordenado con csscomb: 19.429 bytes
CSS ordenado con yandex: 19.427 bytes
CSS ordenado con zen: 19.470 bytes
Así que simplemente por ordenar nuestros archivos con el método de Yandex hemos reducido un 1.34%(263 bytes) el archivo de CSS.
postCSS-cssstats
Controlando el tiempo que utiliza cada plugin para ejecutarse
Plugis que utilizo
MUCHOS PLUGINS MÁS EN: postcss.parts
¡A PRACTICAR!
EJERCICIO 1
NPM + postCSS + Gulp
Creando el package.json
npm initInstalando dependencias
npm install gulp gulp-autoprefixer gulp-postcss gulp-sourcemaps postcss-import postcss-nested postcss-sorting --save-devConfigurando Gulp
var gulp = require('gulp');
postcss = require('gulp-postcss');
autoprefixer = require('gulp-autoprefixer');
sourcemaps = require('gulp-sourcemaps');
atImport = require('postcss-import');
cssnext = require('postcss-cssnext');
sorting = require('postcss-sorting');
nested = require('postcss-nested');Configurando Gulp
gulp.task('css', function() {
var processors = [
atImport,
nested,
cssnext,
sorting({
"sort-order": "csscomb"
}),
autoprefixer
];
});OJO CUIDAO!
El orden de los plugins IMPORTA
PostCSS the bad parts: plugins order.
— Maxime Thirouin (@MoOx) 16 de marzo de 2016
ISSUE - Event based APIPostCSS Reminder: 99% of issues are: autoprefixer is on top (should be last), postcss-import is not on top (should be first).
— Maxime Thirouin (@MoOx) 16 de marzo de 2016
Configurando Gulp
gulp.task('default', function() {
gulp.watch('./src/css/*.css', ['css']);
});Configurando Gulp
return gulp.src('./src/css/styles.css')
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./css'));
EJERCICIO 2
Custom properties y custom selector
EJERCICIO 3
Modificando las custom properties en los Media-Queries
¿PREGUNTAS?
¡GRACIAS!
postCSS REVOLUTION