Share
Si está interesado en utilizar PostCSS, pero aún le encanta su preprocesador favorito, no se preocupe. No necesita elegir entre los dos, puede usarlos uno al lado del otro.
Hay varios complementos de PostCSS que complementan muy bien a los preprocesadores, ya que agregan una funcionalidad a su flujo de trabajo que de otra manera sería imposible, o al menos más difícil, usar solo un preprocesador.
Tocaremos algunos de estos complementos complementarios, luego veremos las guías de configuración para mostrarle cómo usar PostCSS junto con Sass, Stylus o LESS.
Antes de entrar en cómo Puedes usar preprocesadores junto con PostCSS, hablaremos un poco sobre por qué usted querría La respuesta corta es: para obtener acceso a los complementos de PostCSS cuya funcionalidad complementa a los preprocesadores. Para mostrarle por qué vale la pena tenerlas, repasaremos algunos complementos que funcionan realmente bien con preprocesadores.
Nota: puede ser posible lograr resultados finales similares utilizando mixins y funciones en el código del preprocesador regular, pero con cada uno de los siguientes ejemplos, el proceso se maneja automáticamente. Escribes tu CSS normalmente y los complementos se encargan de todo por ti, sin funciones a las que llamar, sin incluir mezclas o argumentos para aprobar..
Se ha escrito una mezcla de preprocesador para manejar la inserción de prefijos de proveedores. Por ejemplo, podrías haber usado @include box-sizing (border-box); de la biblioteca de Compass al proveedor de salida prefijado tamaño de caja reglas.
El problema de confiar en los mixins para prefijos de proveedores es:
Accentsconagua
tamaño de caja por mucho tiempo ...)Autoprefixer elimina estas preocupaciones al manejar el proceso de prefijo de proveedor automáticamente. Autoprefixer escanea su CSS, lo compara con los datos de CanIUse.com, luego agrega los prefijos que son necesarios.
Lea más sobre Autoprefixer en: https://github.com/postcss/autoprefixer
La generación de hojas de estilo predeterminadas y RTL (de derecha a izquierda) a partir de una sola fuente también es algo que se ha hecho con preprocesadores, sin embargo, generalmente requiere el uso de varios mixins y / o la interpolación de variables en su código en varios lugares. Por ejemplo, en lugar de escribir. margen izquierdo: 1rem; puede que necesites escribir margen - # dir: 1rem; o @include margin-left (1rem);.
Sin embargo, con el complemento rtlcss de Mohammad Younes, no necesita usar mixins o interpolación variable, simplemente escriba su hoja de estilo como lo haría normalmente y el complemento encontrará todas las instancias o "derecha" o "izquierda" y las intercambiará. Asi que margen izquierdo: 1rem; se convierte automáticamente margen derecho: 1rem; Sin que tengas que escribir ningún código especial para hacerlo realidad..
Lea más sobre rtlcss en: https://github.com/MohammadYounes/rtlcss
Con el complemento postcss-colorblind de Brian Holt, puede generar automáticamente diferentes versiones de su hoja de estilo que le brindarán una experiencia de primera mano de cómo se vería su diseño para una persona con ceguera al color. Puede simular ocho tipos diferentes de ceguera al color, lo que lo ayuda a obtener una comprensión realmente sólida de lo accesibles que son sus esquemas de color..
Este es un ejemplo de la funcionalidad que realmente tiene que visitar PostCSS para encontrar, ya que sería muy difícil para los preprocesadores lograrlo..
Lea más acerca de postcss-colorblind en: https://github.com/btholt/postcss-colorblind
El complemento postcss-svgo de Ben Briggs puede brindarle una optimización de manos libres del código SVG en línea. Por ejemplo esto:
fondo: url ('datos: imagen / svg + xml; utf-8,');Puede reducirse a esto, menos de la mitad del código:
fondo: url ('datos: imagen / svg + xml; utf-8,');Lea más sobre postcss-svgo en: https://github.com/ben-eb/postcss-svgo
Si bien los preprocesadores pueden eliminar los espacios en blanco y los comentarios, el paquete cssnano de Ben Briggs puede realizar todo tipo de optimizaciones más allá de estos dos pasos. Cubrimos cssnano en detalle en el tutorial Para Minificación y Optimización..
Lea más sobre cssnano en: https://github.com/ben-eb/cssnano
El complemento postcss-font-magician de Jonathan Neal hace que agregar fuentes personalizadas sea tan fácil como usar fuentes normales. No necesitas usar ningún mixins, solo agrega un Familia tipográfica gobierna como lo harías normalmente:
body font-family: "Alice";
... y el plugin se manejará completo @Perfil delantero generación para ti:
@ font-face font-family: "Alice"; estilo de letra: normal; peso de la fuente: 400; src: local ("Alice"), local ("Alice-Regular"), url ("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") formato ("eot") , url ("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") formato ("woff2"), url ("http://fonts.gstatic.com/s/alice/v7 /_H4kMcdhHr0B8RDaQcqpTA.woff ") formato (" woff "), url (" http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf ") formato (" truetype ") cuerpo "Alicia"; Lea más acerca de postcss-font-magician en: https://github.com/jonathantneal/postcss-font-magician
Hay seis guías de configuración a continuación: una guía de Gulp y Grunt para cada preprocesador principal. No hay necesidad de leer los seis, puede pasar directamente a la guía de su preprocesador y herramienta de compilación preferidos. Si no estás seguro de usar Gulp o Grunt, Gulp es definitivamente la opción más sencilla para este tutorial..
Para cualquier guía que siga, deberá comenzar con un proyecto Gulp o Grunt vacío. Puede leer acerca de có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 de origen adjuntos a este tutorial y extraer el proyecto de inicio provisto de Gulp o Grunt en una carpeta de proyecto vacía. Luego, con un terminal o indicador de comando apuntando a la carpeta, ejecute el comando npm instalar.
Después de configurar un proyecto vacío para una de las secciones a continuación, también deberá instalar dos complementos PostCSS: Autoprefixer y cssnano. Puedes hacerlo ejecutando el comando:
npm install autoprefixer cssnano --save-dev
Usaremos estos dos complementos para probar que PostCSS y su preprocesador están trabajando juntos como se esperaba.
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 una sintaxis específica del preprocesador en su código que pueda estrangular un complemento de PostCSS, y tampoco desea que PostCSS realice cambios en su código que impidan que un preprocesador se ejecute como se espera..
Para cada uno de los preprocesadores que configuramos, haremos que ejecuten autoprefixer y cssnano después de que el preprocesador haya finalizado su compilación. En cada caso, tendremos que agregar un código de prueba para que estos dos complementos funcionen en.
Para guardar la repetición del mismo código en cada sección a continuación, cuando vea una instrucción que le indica que agregue su código de prueba PostCSS, agregue esto al archivo fuente del preprocesador en el que está trabajando:
.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * cssnano eliminará este comentario * / display: flex; fuente-peso: normal; margen superior: 1rem; margen inferior: 2rem; margen izquierdo: 1.5rem; margen derecho: 2.5rem; fuente-peso: normal; relleno: 1.75rem; ancho: calc (50rem - (2 * 1.75rem));
Si tiene éxito, su código compilado saldrá en cada caso como:
.css_nano, .css_nano + p, [class * = css_nano] display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margen: 1rem 2.5rem 2rem 1.5rem; font- peso: 400; relleno: 1.75rem; ancho: 46.5rem
Nota: los usos de flexbox se han revisado automáticamente, y cssnano ha realizado múltiples optimizaciones del código. Estamos utilizando el mismo código para probar cssnano como lo hicimos en el tutorial anterior de Minificación y optimización, así que consulte la sección "cssnano" que se encuentra en el mismo para obtener detalles sobre las optimizaciones que se realizan..
Debido a que ya está trabajando con Node.js para ejecutar Gulp o Grunt y PostCSS, la forma más fácil de usar Sass con ellos es hacerlo a través de LibSass. Esto también es considerablemente más rápido que Ruby Sass. Implementaremos LibSass a través de los módulos gulp-sass o grunt-contrib-sass.
Instale el módulo gulp-sass en su proyecto con npm instalar gulp-sass --save-dev.
Ahora puedes actualizar tu 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]; devolver gulp.src ('./ src / *. scss') .pipe (sass (). on ('error', sass .logError)) .pipe (postcss (procesadores)) .pipe (gulp.dest ('./ dest')););Vamos a desglosar lo que hemos cambiado desde el arranque predeterminado Gulpfile:
trago, autoprefixer y cssnano autoprefixer y cssnano variables a la procesadores formacióntubo() línea, .tubería (sass ()… , para procesar el Sass, asegurándose de colocarlo antes de la línea que procesa PostCSSAhora podemos realizar algunas pruebas para asegurarnos de que tanto Sass como PostCSS se están compilando como se espera.
Cambie el nombre de su archivo "src / style.css" a "src / style.scss" y agregue el siguiente código de prueba:
$ font-stack: Helvetica, sans-serif; $ color primario: # 333; body font: 100% $ font-stack; color: $ primario-color;
correr trago css y debería ver un nuevo archivo "style.css" en su carpeta "dest" con el contenido:
body font: 100% Helvetica, sans-serif; color: # 333;
Ahora, agregue el código de prueba PostCSS proporcionado anteriormente en este tutorial a su archivo "style.scss".
Corre tu trago css y debería ver el có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; pantalla: flex; margen: 1rem 2.5rem 2rem 1.5rem; fuente-peso: 400; relleno: 1.75rem; ancho: 46.5rem
En su nuevo proyecto Grunt, instale el módulo grunt-contrib-sass con npm instalar grunt-contrib-sass.
Luego agrega un grunt.loadNpmTasks () Funciona para ello bajo el existente que tienes para PostCSS:
grunt.loadNpmTasks ('grunt-postcss'); grunt.loadNpmTasks ('grunt-contrib-sass');Ahora necesitarás configurar una nueva tarea para procesar Sass. Después de esta línea:
grunt.initConfig (
… Pero antes de la existente postcss tarea, agregue este código:
sass: dist: files: 'src / style.css': 'src / style.scss',
Ahora registraremos una tarea que ejecutará Sass y luego PostCSS. Después de la grunt.loadNpmTasks () función que acaba de insertar, añadir:
grunt.registerTask ('css', ['sass', 'postcss']);Para probar su configuración, cambie el nombre de su archivo "src / style.css" a "style.scss". Agregue este código Sass a él:
$ font-stack: Helvetica, sans-serif; $ color primario: # 333; body font: 100% $ font-stack; color: $ primario-color;
Ejecuta el comando gruñido css y debería ver un nuevo archivo creado en su carpeta "dest" llamado "style.css" y que contiene este código:
body font: 100% Helvetica, sans-serif; color: # 333;
Ahora tendremos nuestros plugins Autoprefixer y cssnano en ejecución. Actualice su Gruntfile's procesadores Array a lo siguiente:
procesadores: [require ('autoprefixer') (), require ('cssnano') ()]Agregue el código de prueba PostCSS a su archivo "style.scss", ejecute el comando gruñido css de nuevo, y debería encontrar el archivo "dest / style.css" recompilado que ahora contiene el código correcto auto reparado y optimizado.
Stylus y PostCSS funcionan particularmente bien juntos gracias a la creación del paquete PostStylus por Sean King, que combina el procesamiento de Stylus y PostCSS. Si eres un desarrollador de Stylus, puedes agregar PostStylus a tu proceso de compilación y tener acceso inmediato a usar los complementos de PostCSS como parte de tu flujo de trabajo.
PostStylus: https://github.com/seaneking/poststylus
Si está utilizando el Gulpfile premade del proyecto inicial, notará que usa el complemento gulp-postcss. En realidad, solo está ahí, ya que es necesario para los procesos de configuración de Sass y LESS, pero para Stylus no lo necesitaremos porque estamos usando PostStylus como nuestro compilador..
Puedes eliminarlo de tu proyecto con npm desinstalar gulp-postcss --save-dev, y borra esta línea de tu Gulpfile:
var postcss = require ('gulp-postcss');Ahora podemos instalar los dos complementos que necesitamos para la compilación de Stylus y PostCSS, ejecutando el comando:
npm instala 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]; devolver gulp.src ('./ src / *. styl') .pipe (stylus (use: [poststylus (procesadores)] )) .pipe (gulp.dest ('./ dest')););Esto es lo que hemos hecho arriba:
estilete, poststilo, autoprefixer y cssnano autoprefixer y cssnano variables a la procesadores formación.tubo() línea que lee .tubería (postcss (procesadores)) .pipa (stylus (… , para configurar los módulos gulp-stylus y poststylus para manejar nuestra compilación Ahora estamos listos para probar la compilación. En su carpeta "src", cambie el nombre de "style.css" a "style.styl" y agregue este código de prueba Stylus:
$ font-stack = Helvetica, sans-serif $ primary-color = # 333 body font: 100% $ font-stack color: $ primary-color
Ejecutar el trago css y debería ver un archivo "style.css" en su carpeta "dest" con este contenido:
body font: 100% Helvetica, sans-serif; color: # 333;
Agregue el código de prueba PostCSS que se proporcionó anteriormente a su archivo "style.styl", asegurándose de que solo las sangrías de las pestañas estén en el código pegado, no espacios.
Recompile y verifique que tenga la salida adecuada 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; pantalla: flex; margen: 1rem 2.5rem 2rem 1.5rem; fuente-peso: 400; relleno: 1.75rem; ancho: 46.5rem
Al igual que con el proyecto Gulp para Stylus, el compilador PostCSS predeterminado que viene con el proyecto de inicio no es obligatorio, ya que solo está disponible para los procesos de configuración Sass y LESS. Puedes eliminarlo de tu proyecto con npm desinstalar grunt-postcss --save-dev.
Ahora podemos instalar grunt-contrib-stylus y poststylus con el comando:
npm instala grunt-contrib-stylus poststylus --save-dev
Ya no vamos a utilizar grunt-postcss, así que localice esta línea:
grunt.loadNpmTasks ('grunt-postcss');Y reemplazarlo con:
grunt.loadNpmTasks ('grunt-contrib-stylus');Dado que no estamos usando grunt-postcss, eso significa que ya no necesitaremos el postcss tarea que hemos definido dentro grunt.initConfig (…);. Eliminar esa configuración de tarea y reemplazarla con esta nueva aguja tarea:
stylus: compile: options: , archivos: 'dest / style.css': 'src / style.styl'
Ahora estamos listos para probar la compilación. En su carpeta "src", cambie el nombre de "style.css" a "style.styl" y agregue este código de prueba Stylus:
$ font-stack = Helvetica, sans-serif $ primary-color = # 333 body font: 100% $ font-stack color: $ primary-color
Ejecuta el comando lápiz duro y debería ver un archivo "style.css" aparecer en su carpeta "dest" con este contenido:
body font: 100% Helvetica, sans-serif; color: # 333
Para agregar nuestros complementos PostCSS en el proceso de compilación, primero debemos agregar este código en la parte superior de nuestro Gruntfile, arriba del módulo.exportaciones… línea:
var poststylus = function () return require ('poststylus') (['autoprefixer', 'cssnano']);Aquí es donde cargará los complementos PostCSS que desee utilizar, en lugar de en un procesadores Array como estarás acostumbrado de nuestros otros tutoriales.
Luego encuentra el opciones objeto dentro de la tarea de lápiz, y actualizarlo a la siguiente:
opciones: uso: [poststylus],
Esto le dice a grunt-contrib-stylus que use poststylus durante la compilación, y sus complementos junto con él.
Agregue el "código de prueba PostCSS" a su archivo "src / style.styl", ejecute lápiz duro, y deberí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; pantalla: flex; margen: 1rem 2.5rem 2rem 1.5rem; fuente-peso: 400; relleno: 1.75rem; ancho: 46.5rem
Instale el módulo sin tragos en su proyecto con npm instalar gulp-less --save-dev.
Ahora puedes actualizar tu 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]; devolver gulp.src ('./ src / *. less') .pipe (less ()) .pipe (postcss (procesadores) ) .pipe (gulp.dest ('./ dest')););Vamos a desglosar lo que hemos cambiado desde el arranque predeterminado Gulpfile:
trago, autoprefixer y cssnano autoprefixer y cssnano variables a la procesadores formación.tubería (less ()) para procesar el MENOR, asegurándose de colocarlo antes de la línea que procesa PostCSSAhora podemos ejecutar algunas pruebas para asegurarnos de que tanto LESS como PostCSS se están compilando como se espera.
Cambie el nombre del archivo “src / style.css” a “src / style.less” y agregue el siguiente código de prueba:
@ font-stack: Helvetica, sans-serif; @ color primario: # 333; body font: 100% @ font-stack; color: @ primario-color;
correr trago css y debería ver un nuevo archivo "style.css" en su carpeta "dest" con el contenido:
body font: 100% Helvetica, sans-serif; color: # 333
Ahora, a su archivo "style.less" agregue el código de prueba PostCSS proporcionado anteriormente en este tutorial.
Corre tu trago css y debería ver el código correcto ahora apareciendo 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; pantalla: flex; margen: 1rem 2.5rem 2rem 1.5rem; fuente-peso: 400; relleno: 1.75rem; ancho: 46.5rem
En su nuevo proyecto Grunt, instale el módulo grunt-contrib-less con npm instalar grunt-contrib-less, luego agrega un grunt.loadNpmTasks () Funciona para ello bajo el existente que tienes para PostCSS:
grunt.loadNpmTasks ('grunt-postcss'); grunt.loadNpmTasks ('grunt-contrib-less');Ahora deberá configurar una nueva tarea para procesar MENOS. Después de esta línea:
grunt.initConfig (
… Pero antes de la existente postcss tarea, agregue este código:
less: production: files: 'src / style.css': 'src / style.less',
Ahora registraremos una tarea, para ejecutar MENOS y luego PostCSS. Después de la grunt.loadNpmTasks () función que acaba de insertar, añadir:
grunt.registerTask ('css', ['less', 'postcss']);Para probar su configuración, cambie el nombre de su archivo "src / style.css" "style.less". Agregue este código MENOS a él:
@ font-stack: Helvetica, sans-serif; @ color primario: # 333; body font: 100% @ font-stack; color: @ primario-color;
Ejecuta el comando gruñido css y debería ver un nuevo archivo creado en su carpeta "dest" llamado "style.css" y que contiene este código:
body font: 100% Helvetica, sans-serif; color: # 333333;
Ahora agregaremos nuestros complementos PostCSS en el flujo de compilación. Actualice su Gruntfile's procesadores Array a lo siguiente:
procesadores: [require ('autoprefixer') (), require ('cssnano') ()]Agregue el código de prueba PostCSS a su archivo "style.less", ejecute el comando gruñido css de nuevo, y debería encontrar que el archivo "dest / style.css" recompilado ahora contiene el código correcto y reparado automáticamente 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; pantalla: flex; margen: 1rem 2.5rem 2rem 1.5rem; fuente-peso: 400; relleno: 1.75rem; ancho: 46.5rem
A continuación, veremos algo que casi se podría considerar un tipo diferente de preprocesamiento: utilizar PostCSS para generar automáticamente clases de CSS compatibles con BEM / SUIT. Este proceso hace que el desarrollo de BEM / SUIT sea mucho más fácil de mantener, por no mencionar más eficiente.
Nos vemos en el siguiente tutorial.!
