PostCSS Guía de Inicio Rápido: Opciones de Configuración Instantánea

() translation by (you can also view the original English article)

Bienvenido a "PostCSS en Profundidad: Guía de Inicio Rápido". A lo largo de estos primeros artículos de nuestra serie, veremos cómo conseguir que te inicies con PostCSS de las maneras más rápidas y eficientes posibles.

En este tutorial, comenzaremos con las opciones de configuración instantáneas para que puedas empezar a trabajar con PostCSS en apenas unos minutos. Actualmente tenemos dos opciones de configuración instantánea: CodePen y Prepros.

Veamos cómo puedes usar ambas para comenzar a jugar con PostCSS ahora mismo.

PostCSS mediante CodePen

Si eres nuevo con PostCSS, la forma más rápida de empezar a usarlo es mediante CodePen.

CodePen tiene ahora soporte pre-integrado para PostCSS junto con los siguientes complementos ('plug-ins') y paquetes:

Esta selección de complementos te ofrece soporte para sintaxis futura, funcionalidad tipo Sass, eliminación de comentarios y la capacidad de escribir código de transformación en modo abreviado.

Comienza yendo a CodePen y creando un nuevo 'pen'. Luego haz clic en el pequeño icono del engranaje en la esquina superior izquierda de la ventana CSS para que aparezca el panel de configuración.

Del menú desplegable etiquetado CSS Preprocessor, selecciona la opción PostCSS. También puedes marcar el botón identificado como Autoprefixer para incluir ese complemento.

Tras completar esta selección, deberías ver ya bajo el menú desplegable un pequeño botón negro con el texto 'Need an add-on?' (¿Necesitas un complemento?). Haz clic en ese botón y se abrirá un panel mostrando una lista de reglas @. Copia y pega cualquiera de estas reglas @ en tu panel CSS para empezar a usar el correspondiente complemento PostCSS.

Ejemplo de uso de CodePen

Veamos un ejemplo de cómo podemos usar los complementos PostCSS disponibles con CodePen, comenzando con el paquete cssnext.

En la parte superior del panel CSS, añade este código para especificar que deseas utilizar cssnext:

1	@use cssnext;

Con esta línea en su lugar, tendrás ahora la capacidad de usar toda la funcionalidad descrita en http://cssnext.io/features. Vamos a utilizar las funciones de color y variables CSS para establecer el color de fondo del elemento 'body' (fondo de la página).

En primer lugar, establecemos una sección :root y definimos en ella una variable CSS. Añade esto a tu panel CSS:

1	:root {
2	--body_bg_color: black;
3	}

Ahora podemos usar esa variable en nuestra CSS añadiendo el siguiente código:

1	body {
2	background: var(--body_bg_color);
3	}

En este punto, deberías haber visto volverse negro el fondo de tu 'pen'. También puedes clicar el botón 'View Compiled' (Ver Compilado) en la parte superior de tu panel CSS, para ver el código que se ha generado:

'View Compiled' (Ver Compilado) mostrando código tras procesar con PostCSS.

Ahora digamos que encontramos ese duro fondo negro algo rígido para el diseño en el que estamos trabajando y queremos iluminarlo un poco. Para ajustar el color podemos utilizar la sintaxis futura que permite la modificación de color.

En la línea que declara la variable --body_bg_color, cambia el valor de black a:

1	--body_bg_color: color(black lightness(20%));

Esta función de color ilumina el negro un 20 %. Ahora deberías ver que tu fondo ha cambiado a un gris oscuro.

Cualquiera de los complementos permitidos pueden usarse en CodePen de la misma manera:

Incluye la regla @ para el complemento que quieres utilizar
Comienza a usar el complemento en tu CSS de acuerdo a sus instrucciones (encontrarás los enlaces arriba)

Aquí está la (visualmente no destacable) demo que acabamos de construir:

PostCSS mediante Prepros

Prepros puede no tener la amplitud de soporte de complementos que ofrece CodePen, pero incluye fluidamente tanto Autoprefixer como cssnext. Prepros puede descargarse de https://prepros.io.

Para comenzar, arrastra y suelta sobre el interfaz un proyecto que incluya un fichero CSS. Luego clica en el nombre del fichero CSS para abrir un panel de configuración en el lado derecho. Desde este punto, puedes marcar las casillas etiquetadas 'AutoPrefix CSS' para activar Autoprefixer y 'Enable Cssnext' para usar cssnext:

Ahora tendrás la posibilidad de utilizar toda la funcionalidad del complemento cssnext, así como tener auto-prefijos en tu CSS.

Recapitulemos

Vale, resumamos rápidamente lo que hemos tratado hasta ahora:

Para comenzar a mojarte los pies con PostCSS, prueba CodePen o PrePros para tener una configuración inmediata
CodePen ofrece diez complementos/paquetes que puedes utilizar
Activa PostCSS en los ajustes de CodePen y después usa las reglas @ para activar complementos específicos
Prepros ofrece el complemento Autoprefixer y el paquete cssnext
Activa ambos en los ajustes de un proyecto Prepros para cualquier fichero CSS

Siguiente: Integración con Ejecutor de Tareas

CodePen y Prepros son dos grandes maneras de ponerse en marcha con PostCSS casi instantáneamente. No obstante, el inconveniente es que no llegas a decidir completamente qué complementos utilizar.

Cuando estés preparado para aprovechar el poder completo de PostCSS, querrás elegir y configurar tu propia selección de complementos. Probablemente, la forma más accesible de hacerlo es configurando proyectos PostCSS a medida mediante ejecutores de tareas como Gulp o Grunt.

Aprenderás cómo llevarlo a cabo en los dos próximos tutoriales, "Guía de Inicio Rápido: Configuración de Gulp" y "Guía de Inicio Rápido: Configuración de Grunt".