Uso de PostCSS junto con Sass, Stylus o LESS

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

Si está interesado en usar PostCSS, pero aún le encanta su preprocesador favorito, no se preocupe. No necesita hacer una elección entre los dos; puede usarlos uno al lado del otro.

Hay varios complementos de PostCSS que complementan muy bien a los preprocesadores, ya que añaden funcionalidad a su flujo de trabajo que de otro modo sería imposible, o al menos más difícil, utilizando solo un preprocesador.

Vamos a tocar algunos de estos complementos gratuitos, luego revisaremos las guías de instalación para mostrarle cómo usar PostCSS al lado de Sass, Stylus o LESS.

¿Por qué usar ambos?

Antes de que veamos cómo puede usar los preprocesadores junto con PostCSS, hablaremos un poco acerca de por qué lo desea. La respuesta breve es: para obtener acceso a los complementos de PostCSS cuya funcionalidad complementa a los preprocesadores. Para mostrarle por qué vale la pena tener estos, revisaremos un puñado de complementos que funcionan muy bien con los preprocesadores.

Nota: puede ser posible lograr resultados finales similares mediante el uso de mixins y funciones en el código de preprocesador regular, pero con cada uno de los ejemplos a continuación, el proceso se maneja automáticamente. Escribes tu CSS normalmente y los complementos se encargan de todo por ti, sin funciones para llamar, sin mixins para incluir o argumentos para aprobar.

autoprefixer

Se han escrito muchas mezclas de preprocesadores para manejar la inserción de prefijos de proveedor. Por ejemplo, puede haber usado @include box-sizing (border-box); desde la biblioteca de Compass a las reglas de box-sizing con prefijo del proveedor de salida.

El problema de depender de mixins para los prefijos de proveedor es:

Primero tiene que saber que una propiedad necesita prefijos antes de poder implementar una mezcla para ella.
Debes saber el nombre de la mezcla asociada y cómo usarla.
Tienes que mantener el control cuando los prefijos del vendedor ya no sean necesarios para cada propiedad (sé que estaba prefijando el tamaño de la caja por mucho tiempo ...)

El autoprefixer elimina estas preocupaciones mediante el manejo automático del proceso de prefijación del proveedor. Autoprefixer escanea su CSS, lo compara con los datos de CanIUse.com, luego agrega los prefijos que se requieren.

Lea más acerca de Autoprefixer en: https://github.com/postcss/autoprefixer

rtlcss

Generar hojas de estilo predeterminadas y RTL (de derecha a izquierda) desde una única fuente también es algo que se ha hecho con los preprocesadores, sin embargo, normalmente requiere el uso de varias mezclas y / o variables de interpolación en el código en varios lugares. Por ejemplo, en lugar de escribir margin-left: 1rem; es posible que necesite escribir margen - # {dir}: 1rem; o @include margin-left (1rem) ;.

Sin embargo, con el plugin rtlcss de Mohammad Younes, no es necesario utilizar mixins o interpolación variable, simplemente escriba su hoja de estilo como lo haría normalmente y el complemento encontrará todas las instancias o "derecha" o "izquierda" y las intercambiará. Entonces margin-left: 1rem; se convierte automáticamente en margen derecho: 1rem; sin tener que escribir ningún código especial para hacerlo realidad.

Lea más acerca de rtlcss en: https://github.com/MohammadYounes/rtlcss

postcss-colorblind

Con el plugin postcss-colorblind de Brian Holt, puede generar automáticamente diferentes versiones de su hoja de estilo que le proporcionen experiencia de primera mano sobre cómo se vería su diseño para una persona con daltonismo. Puede simular ocho tipos diferentes de daltonismo, ayudándote a obtener una comprensión realmente sólida de cuán accesibles son tus combinaciones de colores.

Este es un ejemplo de funcionalidad que realmente tiene que ir a PostCSS para encontrar, ya que sería muy difícil de lograr para los preprocesadores.

Lea más acerca de postcss-colorblind en: https://github.com/btholt/postcss-colorblind

postcss-svgo

El complemento postcss-svgo de Ben Briggs puede ofrecerle la optimización manos libres del código SVG en línea. Por ejemplo esto:

background: url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="50" cy="50" r="40" fill="yellow" /></svg>');

Puede reducirse a esto, menos de la mitad del código:

1	background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="#ff0"/></svg>');

Lea más acerca de postcss-svgo en: https://github.com/ben-eb/postcss-svgo

cssnano

Mientras que los preprocesadores pueden quitar espacio en blanco y comentarios, el paquete cssnano de Ben Briggs puede realizar todo tipo de optimizaciones más allá de estos dos pasos. Cubrimos cssnano en detalle en el tutorial de Minificación y Optimización.

Lea más sobre cssnano en: https://github.com/ben-eb/cssnano

postcss-font-magician

El postcss-font-magician de Jonathan Neal hace que agregar fuentes personalizadas sea tan fácil como usar fuentes regulares. No necesita usar ningún mixins, simplemente agregue una regla de familia de fuentes como lo haría normalmente:

1	body {
2	font-family: "Alice";
3	}

... y el complemento manejará la generación de @ font-face completa para usted:

@font-face {
   font-family: "Alice";
   font-style: normal;
   font-weight: 400;
   src: local("Alice"), local("Alice-Regular"),
        url("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format("eot"),
        url("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") format("woff2"),
        url("http://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.woff")  format("woff"),
        url("http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf")   format("truetype")
}

body {
  font-family: "Alice";
}

Lea más acerca de postcss-font-mago en: https://github.com/jonathantneal/postcss-font-magician

Configuración del proyecto

Hay seis guías de configuración a continuación: una guía Gulp y Grunt para cada preprocesador principal. No es necesario leer los seis, puede pasar directamente a la guía de su preprocesador preferido y herramienta de compilación. Si no está seguro de si usar Gulp o Grunt, Gulp es definitivamente la opción más simple para este tutorial.

Para cualquier guía que sigas, necesitarás comenzar con un proyecto Gulp o Grunt vacío. Puede leer sobre cómo configurar proyectos Gulp o Grunt para PostCSS en los tutoriales anteriores

respectivamente.

Sin embargo, si no desea configurar manualmente su proyecto desde cero, puede descargar los archivos fuente adjuntos a este tutorial y extraer el proyecto inicial Gulp o Grunt proporcionado en una carpeta de proyecto vacía. Luego, con un terminal o símbolo del sistema apuntando a la carpeta, ejecute el comando npm install.

Instale los complementos de PostCSS en su proyecto

Después de configurar un proyecto vacío para una de las siguientes secciones, también deberá instalar dos complementos de PostCSS: Prefijo automático y cssnano. Puede hacerlo ejecutando el comando:

1	npm install autoprefixer cssnano --save-dev

Usaremos estos dos complementos para probar que PostCSS y su preprocesador están trabajando juntos como se esperaba.

Preproceso antes de PostCSS

La primera regla de usar un preprocesador con PostCSS es que siempre debe ejecutar dicho preprocesador primero. Esto se debe a que no desea tener ninguna sintaxis específica del preprocesador en su código que pueda ahogar un complemento de PostCSS, y tampoco desea que PostCSS realice cambios en su código que podrían evitar que un preprocesador se ejecute como se esperaba.

Complementos PostCSS y "Código de prueba PostCSS"

Para cada uno de los preprocesadores que configuramos, les pediremos que ejecuten autoprefixer y cssnano una vez que el preprocesador haya terminado su compilación. En cada caso, necesitaremos agregar un código de prueba para que funcionen estos dos complementos.

Para ahorrar la repetición del mismo código en cada una de las siguientes secciones, cuando vea una instrucción que le indica que agregue su código de prueba PostCSS, agregue esto al archivo fuente del preprocesador en el que está trabajando:

.css_nano, .css_nano + p, [class*="css_nano"], .css_nano {
    /* cssnano will remove this comment */
	display: flex;
	font-weight: normal;
	margin-top: 1rem;
	margin-bottom: 2rem;
	margin-left: 1.5rem;
	margin-right: 2.5rem;
	font-weight: normal;
	padding: 1.75rem;
	width: calc(50rem - (2 * 1.75rem));
}

Si tiene éxito, su código compilado aparecerá en cada caso como:

1	.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Nota: los usos de flexbox han sido autoprefijados, y cssnano ha realizado múltiples optimizaciones del código. Estamos usando el mismo código para probar cssnano como lo hicimos en el tutorial anterior de For Minification and Optimization, así que consulte la sección "cssnano" para obtener detalles sobre las optimizaciones que se están realizando.

1. Sass + PostCSS

Como ya está trabajando con Node.js para ejecutar Gulp o Grunt y PostCSS, la forma más fácil de usar Sass junto a ellos es hacerlo a través de LibSass. Esto también es considerablemente más rápido que Ruby Sass. Implementaremos LibSass a través de los módulos gulp-sass o grudo-contrib-sass.

Configuración vía Gulp

Instale el módulo gulp-sass en su proyecto con npm install gulp-sass --save-dev.

Ahora puede actualizar su Gulpfile a lo siguiente:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dest'));
});

Vamos a desglosar lo que hemos cambiado del archivo de inicio predeterminado Gulpfile:

Se agregaron variables para cargar gulp-sass, autoprefixer y cssnano
Se agregaron las variables autoprefixer y cssnano a la matriz de procesadores
Editó la extensión de archivo en el archivo fuente que estamos compilando en ".scss" en lugar de ".css"
Se agregó una nueva línea pipe (), .pipe (sass () ..., para procesar el Sass, asegurándose de colocarlo antes de la línea que procesa PostCSS

Ahora podemos ejecutar algunas pruebas para asegurarnos de que tanto Sass como PostCSS se compilan como se esperaba.

Preprocesador de prueba

Cambie el nombre de su archivo existente "src / style.css" a "src / style.scss" y agregue el siguiente código de prueba:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Ejecute gulp css y debería ver un nuevo archivo "style.css" aparecer en su carpeta "dest" con los contenidos:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333; }

Prueba PostCSS

Ahora, agregue el código de prueba PostCSS proporcionado anteriormente en este tutorial a su archivo "style.scss".

Ejecute su comando gulp css y debería ver el código correcto en su archivo "dest / style.css":

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Configuración vía Grunt

En su nuevo proyecto Grunt, instale el módulo grunt-contrib-sass con npm install grunt-contrib-sass.

A continuación, agregue una función grunt.loadNpmTasks () para ello debajo de la existente que tiene para PostCSS:

1	grunt.loadNpmTasks('grunt-postcss');
2	grunt.loadNpmTasks('grunt-contrib-sass');

Ahora deberá configurar una nueva tarea para procesar Sass. Después de esta línea:

1	grunt.initConfig({

... pero antes de la tarea postcss existente, agregue este código:

    sass: {
      dist: {
        files: {
          'src/style.css': 'src/style.scss'
        }
      }
    },

Ahora registraremos una tarea que ejecutará Sass y luego PostCSS. Después de la función grunt.loadNpmTasks () que acaba de insertar, agregue:

1	grunt.registerTask('css', ['sass', 'postcss']);

Preprocesador de prueba

Para probar su configuración, cambie el nombre de su archivo existente "src / style.css" a "style.scss". Agregue este código Sass a él:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Ejecuta el comando grunt css y deberías ver un nuevo archivo creado en tu carpeta "dest" llamado "style.css" y que contiene este código:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333; }

Configurar PostCSS

Ahora ejecutaremos nuestros plugins Autoprefixer y cssnano. Actualice la matriz de procesadores de Gruntfile a lo siguiente:

1	processors: [
2	require('autoprefixer')(),
3	require('cssnano')()
4	]

Prueba PostCSS

Agregue el código de prueba PostCSS a su archivo "style.scss", ejecute el comando grunt css de nuevo y encontrará que el archivo "dest / style.css" recompilado ahora contiene el código correcto autoprefixed y optimizado.

2. Stylus + PostCSS

Stylus y PostCSS funcionan particularmente bien juntos gracias a la creación del paquete PostStylus de Sean King, que combina el procesamiento de Stylus y PostCSS. Si es un desarrollador de Stylus, puede agregar PostStylus a su proceso de compilación e inmediatamente tener acceso al uso de complementos de PostCSS como parte de su flujo de trabajo.

PostStylus: https://github.com/seaneking/poststylus

Configuración a través de Gulp

Si está utilizando el archivo Gulp prefabricado del proyecto inicial, notará que usa el complemento gulp-postcss. En realidad, esto solo está allí, ya que es necesario para los procesos de instalación de Sass y LESS, pero para Stylus no lo necesitaremos porque en su lugar utilizamos PostStylus como nuestro compilador.

Puede eliminarlo de su proyecto con npm uninstall gulp-postcss --save-dev, y eliminar esta línea de su Gulpfile:

1	var postcss = require('gulp-postcss');

Ahora podemos instalar los dos complementos que necesitamos para la compilación de Stylus y PostCSS, ejecutando el comando:

1	npm install gulp-stylus poststylus --save-dev

Actualiza tu Gulpfile para convertirte en:

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var poststylus = require('poststylus');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.styl')
		.pipe(stylus({
			use: [
				poststylus(processors)
			]
		}))
		.pipe(gulp.dest('./dest'));
});

Esto es lo que hemos hecho arriba:

Se agregaron variables para cargar gulp-stylus, poststylus, autoprefixer y cssnano
Se agregaron las variables autoprefixer y cssnano a la matriz de procesadores
Editó la extensión de archivo en el archivo de origen que estamos compilando para ".styl" en lugar de ".css"
Se eliminó la línea .pipe () que lee .pipe (postcss (procesadores))
Se reemplazó con .pipe (stylus ({..., para configurar los módulos gulp-stylus y poststylus para manejar nuestra compilación)

Preprocesador de prueba

Ahora estamos listos para probar la compilación. En su carpeta "src", cambie el nombre de "style.css" por "style.styl" y agregue este código de prueba Stylus:

$font-stack = Helvetica, sans-serif
$primary-color = #333

body
  font: 100% $font-stack
  color: $primary-color

Ejecute el comando gulp css y verá un archivo "style.css" en su carpeta "dest" con este contenido:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333;
4	}

Test PostCSS

Agregue el código de prueba PostCSS proporcionado anteriormente a su archivo "style.styl", asegurándose de que solo las sangrías de las tabulaciones estén en el código pegado, no en los espacios.

Vuelva a compilar y compruebe que tiene el resultado adecuado en su archivo "dest / style.css".

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Configuración a través de Grunt

Al igual que con el proyecto Gulp para Stylus, el compilador PostCSS predeterminado que viene con el proyecto de inicio no es necesario, ya que está allí solo para los procesos de configuración de Sass y LESS. Puede eliminarlo de su proyecto con npm uninstall grunt-postcss --save-dev.

Ahora podemos instalar grunt-contrib-stylus y poststylus con el comando:

1	npm install grunt-contrib-stylus poststylus --save-dev

Ya no usaremos grunt-postcss, así que localice esta línea:

1	grunt.loadNpmTasks('grunt-postcss');

Y reemplázalo con:

1	grunt.loadNpmTasks('grunt-contrib-stylus');

Dado que no estamos usando grunt-postcss, eso significa que ya no necesitaremos la tarea postcss que hemos definido dentro de grunt.initConfig ({...}) ;. Elimine esa configuración de tarea y reemplácela con esta nueva tarea de lápiz:

    stylus: {
      compile: {
        options: {
        },
        files: {
          'dest/style.css': 'src/style.styl'
        }
      }
    }

Test Preprocessor

Ahora estamos listos para probar la compilación. En su carpeta "src", cambie el nombre de "style.css" por "style.styl" y agregue este código de prueba Stylus:

$font-stack = Helvetica, sans-serif
$primary-color = #333

body
  font: 100% $font-stack
  color: $primary-color

Ejecute el comando grunt stylus y verá un archivo "style.css" en su carpeta "dest" con este contenido:

1	body{font:100% Helvetica,sans-serif;color:#333}

Configurar PostCSS

Para agregar nuestros complementos PostCSS en el proceso de compilación, primero debemos agregar este código a la parte superior de nuestro Gruntfile, arriba de la línea module.exports ...:

1	var poststylus = function() {
2	return require('poststylus')(['autoprefixer', 'cssnano'])
3	};

Aquí es donde cargará los complementos de PostCSS que quiera usar, en lugar de en una matriz de procesadores, como estará acostumbrado en nuestros otros tutoriales.

A continuación, busque el objeto de opciones dentro de la tarea del lápiz óptico y actualícelo de la siguiente manera:

1	options: {
2	use: [poststylus]
3	},

Esto le dice a grunt-contrib-stylus que use poststylus durante la compilación, y sus complementos junto con él.

Test PostCSS

Agregue el "código de prueba PostCSS" a su archivo "src / style.styl", ejecute stylus ronco, y debería ver el siguiente contenido escrito en su archivo "dest / style.css":

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

3. MENOS + PostCSS

Configuración a través de Gulp

Instale el módulo sin gulp en su proyecto con npm install gulp-less --save-dev.

Ahora puede actualizar su Gulpfile a lo siguiente:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var less = require('gulp-less');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.less')
		.pipe(less())
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dest'));
});

Vamos a desglosar lo que hemos cambiado del archivo de inicio predeterminado Gulpfile:

Se agregaron variables para cargar gulp-less, autoprefixer y cssnano
Se agregaron las variables autoprefixer y cssnano a la matriz de procesadores
Editó la extensión de archivo en el archivo de origen que estamos compilando para ".less" en lugar de ".css"
Se agregó .pipe(less ()) para procesar el LESS, asegurándose de colocarlo antes de la línea que procesa PostCSS

Preprocesador de prueba

Ahora podemos ejecutar algunas pruebas para asegurarnos de que tanto LESS como PostCSS se compilan como se esperaba.

Cambie el nombre del archivo "src / style.css" existente a "src / style.less" y agregue el siguiente código de prueba:

@font-stack: Helvetica, sans-serif;
@primary-color: #333;

body {
  font: 100% @font-stack;
  color: @primary-color;
}

Ejecute gulp css y debería ver un nuevo archivo "style.css" aparecer en su carpeta "dest" con los contenidos:

1	body{font:100% Helvetica,sans-serif;color:#333}

Test PostCSS

Ahora, a su archivo "style.less" agregue el código de prueba PostCSS proporcionado anteriormente en este tutorial.

Ejecute su comando gulp css y debería ver el código correcto que ahora aparece en su archivo "dest / style.css".

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Configuración a través de Grunt

En su nuevo proyecto Grunt, instale el módulo grunt-contrib-less con npm install grunt-contrib-less, luego agregue una función grunt.loadNpmTasks () para él bajo el existente que tiene para PostCSS:

1	grunt.loadNpmTasks('grunt-postcss');
2	grunt.loadNpmTasks('grunt-contrib-less');

Ahora deberá configurar una nueva tarea para procesar MENOS. Después de esta línea:

1	grunt.initConfig({

... pero antes de la tarea postcss existente, agregue este código:

    less: {
      production: {
        files: {
          'src/style.css': 'src/style.less'
        }
      }
    },

Ahora registraremos una tarea, para ejecutar LESS y luego PostCSS. Después de la función grunt.loadNpmTasks () que acaba de insertar, agregue:

1	grunt.registerTask('css', ['less', 'postcss']);

Preprocesador de prueba

Para probar su configuración, cambie el nombre de su archivo "src / style.css" "style.less". Agregue este código LESS:

@font-stack: Helvetica, sans-serif;
@primary-color: #333;

body {
  font: 100% @font-stack;
  color: @primary-color;
}

Ejecuta el comando grunt css y deberías ver un nuevo archivo creado en tu carpeta "dest" llamado "style.css" y que contiene este código:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333333;
4	}

Configurar PostCSS

Ahora agregaremos nuestros complementos PostCSS en el flujo de compilación. Actualice la matriz de procesadores de Gruntfile a lo siguiente:

1	processors: [
2	require('autoprefixer')(),
3	require('cssnano')()
4	]

Test PostCSS

Agregue el código de prueba PostCSS a su archivo "style.less", ejecute el comando grunt css nuevamente y encontrará que el archivo "dest / style.css" recompilado ahora contiene el código correcto autoprefixed y optimizado:

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

En el Siguiente Tutorial

A continuación, comprobaremos algo que casi podría considerar un tipo diferente de preprocesamiento: utilizar PostCSS para generar automáticamente clases de CSS compatibles con BEM / SUIT. Este proceso hace que el desarrollo de BEM / SUIT sea mucho más fácil de seguir, sin mencionar que es más eficiente.

¡Nos vemos en el próximo tutorial!