Share
En el tutorial anterior analizamos cómo utilizar el excelente paquete de preprocesamiento "PreCSS". En este tutorial, abordaremos el preprocesamiento basado en PostCSS de una manera diferente; instalando una selección de complementos seleccionados a mano para construir nuestro preprocesador personalizado desde cero.
Te voy a llevar a través de la configuración de lo que yo personalmente Encuentra una gran combinación de complementos de extensión de lenguaje. Pero cuando se trata de utilizar su propio preprocesador, puede optar por utilizar solo algunos de los complementos que cubrimos aquí, o puede elegir ninguno, en lugar de utilizar otras opciones..
Esa es la belleza de este proceso; Puede tener la configuración de su preprocesador como lo desee. El propósito de este tutorial será brindarle la experiencia práctica de armar un preprocesador PostCSS y proporcionarle las características de los complementos disponibles en la actualidad para que pueda decidir por sí mismo cuál desea usar..
Vamos a empezar!
Lo primero que deberá hacer es configurar su proyecto para que utilice Gulp o Grunt, según sus preferencias. Si aún no tiene una preferencia por uno u otro, recomiendo usar Gulp ya que necesitará menos código para lograr los mismos fines..
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 Gulp o Grunt proporcionado en una carpeta de proyecto vacía..
Luego, con un terminal o indicador de comando apuntando a la carpeta, ejecute el comando npm instalar.
Este tutorial asumirá que has seguido las entradas anteriores de la serie y ahora estás familiarizado con cómo instalar un complemento en tu proyecto y cargarlo a través de tu Gulpfile o Gruntfile.
Importante! A medida que avanzamos, asegúrese de cargar los complementos en su Gulpfile / Gruntfile en el orden que ve en este tutorial; el orden de carga es importante en PostCSS para que todo funcione sin problemas.
El primer lugar en el que vamos a comenzar con la preparación de nuestro preprocesador personalizado es la importación. Ya has visto la incorporación de PostCSS de @importar Hojas de estilo en los tutoriales anteriores Para minificación y optimización y preprocesamiento con PreCSS. La forma en que se utilizarán las importaciones en este preprocesador no es diferente.
Acabamos de mencionar el hecho de que el orden de carga es importante en PostCSS, y aquí encontramos el primer ejemplo de esto. Queremos asegurarnos de todo @importar Los archivos están en línea como el primer paso, de modo que tenemos todo el código de nuestro proyecto en un solo lugar para que el resto de nuestros complementos se ejecuten en contra..
Por ejemplo, podríamos almacenar todas nuestras variables en un archivo parcial, y utilizar @importar para poner eso parcial en nuestra hoja de estilo principal. Si no ejecutáramos el plugin que inline @importar los archivos primero, nuestras variables no se importarán y, por lo tanto, no estarán disponibles para el resto de nuestro procesamiento para trabajar con.
Debido a que vamos a comenzar a importar parciales, queremos hacer un pequeño ajuste a nuestro Gulpfile antes de agregar nuestra funcionalidad de importación..
Nota: si usa Grunt, no necesitará realizar ningún cambio en esta etapa.
En este momento, tenemos un archivo ".css" en la carpeta "src" compilado, pero no queremos compilar archivos parciales de forma accidental. Importaremos todo en nuestro archivo "style.css", por lo que es el único que debe compilarse.
Encuentra esta línea:
Accentsconagua
devuelve gulp.src ('./ src / *. css')... y cambiarlo a:
devuelve gulp.src ('./ src / style.css')Este es el mismo complemento que usamos en el tutorial "Para minificación y optimización", y también se usa en PreCSS, por lo que estará un poco familiarizado con él en este momento..
Instale el complemento en su proyecto, luego en su carpeta "src" cree un archivo llamado "_vars.css" y agregue un código de prueba básico. Tenga en cuenta que aún no hemos agregado la funcionalidad de las variables, así que solo un CSS directo, por ejemplo:
.prueba fondo: negro;
Ahora importe su nuevo archivo de variables a su archivo principal "src / style.css" agregando este código en la primera línea:
@import "_vars";
Compile su código, luego verifique su archivo "dest / style.css" y debería ver que ahora contiene el código de su archivo "_vars.css".
Nota: este plugin debe ejecutarse antes de los complementos postcss-anested y postcss-simple-vars, que usaremos.
Continúe e instale postcss-mixins, luego agregue el siguiente código a su archivo "src / style.css":
@ define-mixin icon $ network, $ color .button. $ (network) background-image: url ('img / $ (network) .png'); color de fondo: $ color; icono de @mixin twitter, azul;Después de compilar su "dest / style.css" debe tener el siguiente código compilado agregado:
.button.twitter background-image: url ('img / twitter.png'); color de fondo: azul; El complemento de postcss-mixins que estamos usando aquí es el mismo que se usa en PreCSS. Repasamos cómo usarlo en el tutorial de PreCSS, así que para obtener todos los detalles sobre su sintaxis, consulte la sección "Mixins" del tutorial anterior..
Si prefieres usar la sintaxis de Sass al crear mixins, revisa el plugin postcss-sassy-mixins de Andy Jansson, que funciona de la misma manera que los mixcs postcss pero con la sintaxis. @mixin para definir un mixin, y @incluir usar uno.
Nota: el postcss-for plugin es otro que debe ser ejecutado antes de postcss-anested y postcss-simple-vars.
Instale el complemento postcss-for, luego pruebe que funciona como se espera agregando este código a su archivo "src / style.css":
@for $ i de 1 a 3 p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Debería compilar para darle:
p: enésima de tipo (1) margen izquierdo: calc (100% / 1); p: nth-of-type (2) margin-left: calc (100% / 2); p: nth-of-type (3) margin-left: calc (100% / 3);
Una vez más, el plugin que estamos usando para agregar @para Loops es el mismo que se usa en PreCSS, así que para obtener información adicional sobre su sintaxis, consulte la sección "Loops" en el tutorial anterior..
El complemento postcss-for debe ejecutarse antes de postcss-simple-vars, lo que significa que no hay forma de usar variables para establecer el rango que desea. @para bucle para iterar a través.
Si esto es un problema, en su lugar puede usar este fork del complemento postcss-for que debería cargarse. después Los plugins de postcss-simple-vars.
Debido a que se ejecuta después de evaluar las variables, puede utilizar las variables para establecer el rango que desea @para bucle para iterar a través, de esta manera:
@de 1; @count: 3; @for $ i de @from a @count p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Vamos a agregar dos tipos de variables a nuestro preprocesador, las cuales pueden ser muy útiles. El primer tipo usa una sintaxis similar a Sass, y el segundo usa la sintaxis de las propiedades personalizadas de CSS, también conocidas como variables CSS.
Instala estos dos complementos, luego probaremos cada uno a la vez.
Primero, probaremos la sintaxis similar a Sass de postcss-simple-vars. Abra el archivo "_vars.css" que creó anteriormente, elimine su contenido y agregue el siguiente código:
$ default_padding: 1rem;
Agregue lo siguiente a su archivo "src / style.css" y vuelva a compilarlo:
.post padding: $ default_padding;
Debería compilar para darle:
.post padding: 1rem;
Ahora probaremos las propiedades personalizadas de CSS como la sintaxis de postcss-css-variables. Agregue el siguiente código a su archivo "src / style.css":
: root --h1_font_size: 3rem; h1 font-size: var (- h1_font_size); @media (ancho máximo: 75rem) h1 --h1_font_size: 4vw;
Se debe compilar en:
h1 font-size: 3rem; @media (max-width: 75rem) h1 font-size: 4vw;
Tenga en cuenta que al usar variables CSS, solo tuvimos que cambiar el valor del --h1_font_size variable dentro de la consulta de medios y automáticamente sale el asociado tamaño de fuente propiedad. Esta es una funcionalidad particularmente útil..
Antes de continuar, solo mencionaré brevemente que el enfoque adoptado en este tutorial no es el que usted aborda. tener tomar. Si desea utilizar un tipo de variable y no el otro, eso es completamente correcto.
Desde mi perspectiva, la razón por la que me gusta usar ambos tipos de variables es que las uso de dos maneras diferentes. Normalmente usaré la sintaxis de las propiedades personalizadas de CSS en mi hoja de estilo principal, mientras que uso las variables de tipo Sass en mis archivos parciales.
Esto me permite configurar las propiedades personalizadas de CSS para el tipo de variables que realmente podría usar en un proyecto en vivo si / cuando se vuelven bien compatibles en todos los navegadores. Como se vio en el ejemplo anterior, también tienen cierta funcionalidad que las variables de tipo Sass no tienen.
Mientras tanto, puedo usar variables tipo Sass para cosas que no pertenecen a una hoja de estilo en vivo, especialmente aquellas que existen para ser procesadas a través de cosas como cada uno de los bucles, condicionales y otras transformaciones..
Como alternativa al uso de postcss-simple-vars, puede considerar usar postcss-advanced-variables, el complemento utilizado como parte del paquete PreCSS.
Esta es también una excelente opción, con la diferencia principal de que maneja condicionales, bucles y variables en el mismo complemento. Para mí, la razón por la que actualmente elijo postcss-simple-vars es que prefiero que los condicionales provengan de un complemento separado; postcss-condicionales que cubriremos en breve.
En lugar de utilizar las variables postcss-css, puede preferir postcss-custom-properties.
La diferencia esencial entre los dos es que las propiedades personalizadas de postcss se ajustan estrictamente a la especificación W3C para las propiedades personalizadas, por lo que puede estar seguro de que está escribiendo solo el CSS futuro correcto. Por otro lado, postcss-css-variables ofrece funcionalidad adicional, pero al hacerlo no pretende tener una paridad completa con las especificaciones..
Personalmente elijo postcss-css-variables porque lo uso en el contexto de preprocesamiento donde escribo muchos códigos que no son de especificación. Como tal, prefiero tener la funcionalidad adicional más del 100% de conformidad con las especificaciones.
Sin embargo, si está utilizando variables en el contexto de la escritura de futuros CSS, puede encontrar que postcss-custom-properties es una mejor opción para usted.
Instale el plugin postcss-each y luego agregue este código variable a su archivo "_vars.css":
$ social: twitter, facebook, youtube;
Este código define una lista, almacenada en el $ social variable.
Ahora vamos a crear una @cada bucle para recorrer los valores almacenados en nuestro $ social variable. Agregue este código a su archivo "src / style.css":
@each $ icon in ($ social) .icon - $ (icon) background: url ('img / $ (icon) .png'); Nuestro @cada El bucle ya está listo, pero antes de que podamos compilarlo, necesitamos hacer un pequeño cambio de configuración en las opciones de postcss-simple-vars.
Notarás que en el código anterior estamos usando $ icon para representar el valor actual que estamos iterando. Puede surgir alguna dificultad debido a que el complemento postcss-simple-vars busca el PS Iniciar sesión para identificar variables..
Esto significa que verá $ icon, piensa que es una variable, intenta procesarla, luego ve que no tiene un valor. Eso hará que deje de compilar y registre un error en la consola al descubrir una variable no definida..
Para resolver esto, queremos añadir la opción. silencioso: verdadero a nuestras opciones para el plugin. Esto significa que si descubre una variable no definida no dejará de compilar para registrar un error, simplemente continuará. Por lo tanto no será molestado por la presencia. $ icon en nuestro @cada bucle y podremos compilar con éxito.
En la matriz de procesadores de Gulpfile o Gruntfile, configure la opción:
/ * Gulpfile * / simple_vars (silent: true) / * Gruntfile * / require ('postcss-simple-vars') (silent: true)Ahora compila tu CSS y deberías obtener:
.icon-twitter background: url ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube background: url ('img / youtube.png'); Como se mencionó anteriormente, postcss-advanced-variables es otra excelente opción de complemento que maneja variables, ciclos y condicionales, todo en uno..
Mencioné anteriormente que este complemento es mi preferencia para manejar los condicionales. Esto se debe a que descubrí que es capaz de manejar verificaciones condicionales más complejas. Incluye soporte para @else si sintaxis, lo que significa que puede probar más condiciones en una sola pieza de código.
Después de instalar el complemento postcss-conditionals, pruébelo agregando este código a su archivo "src / style.css":
$ column_count: 3; .column @if $ column_count == 3 width: 33%; flotador izquierdo; @else if $ column_count == 2 width: 50%; flotador izquierdo; @else ancho: 100%;
Este código verificará el valor que hemos establecido en la variable @column_count y generará diferentes valores de ancho y flotación dependiendo de lo que encuentre. Funciona de la misma manera que el código que usamos en el tutorial de preprocesamiento anterior, pero ahora que tenemos la capacidad de usar @else si líneas que hemos podido aumentar el número de condiciones que estamos probando de dos a tres.
Después de recompilar esto deberías darte:
.columna ancho: 33%; flotador izquierdo
Intenta cambiar $ column_count a 2 o 1 y compilando de nuevo para ver cómo cambia la salida de CSS.
También podemos usar estos tipos de condicionales dentro de los mixins, para los cuales agregamos soporte anteriormente. Por ejemplo, podemos crear un mixin para generar código de diseño de columna así:
@ define-mixin column $ count @if $ count == 3 width: 33%; flotador izquierdo; @else si $ count == 2 ancho: 50%; flotador izquierdo; @else ancho: 100%; .another_column @mixin columnas 2;
Esto le dará la salida:
.otra_columna ancho: 50%; flotador izquierdo;
Como se mencionó anteriormente, postcss-advanced-variables es otra excelente opción de complemento que maneja variables, ciclos y condicionales, todo en uno..
En un tutorial anterior usamos postcss-calc, a través de cssnano, para ayudar a crear instancias de calc () uso más eficiente. Sin embargo, en el contexto del preprocesamiento, puede ser muy útil donde quiera que queramos usar las matemáticas en nuestras hojas de estilo..
Continúe e instale postcss-calc, luego vamos a probarlo haciendo que la mezcla de generación de columnas que agregamos sea más eficiente.
En este momento estamos usando condicionales para verificar si la mezcla es $ cuenta argumento se establece en cualquiera 1, 2 o 3 luego emitiendo un ancho pre-calculado correspondiente. En su lugar, usaremos calc () para generar automáticamente el ancho correcto para nuestro código de columna, sin importar qué número pase a través de la mezcla.
Agregue a su archivo "src / style.css":
@ define-mixin columns_calc $ count width: calc (100% / $ count); @if $ count> 1 float: left; .column_calculated @mixin columns_calc 2;
En lugar de codificar los anchos porcentuales que necesitaríamos para ciertos números de columnas, ahora lo estamos calculando sobre la marcha.
El plugin postcss-calc convertirá ancho: calc (100% / $ conteo); en una cantidad estática dependiendo del valor pasado cuando llamamos a la mezcla, en este caso 2.
Recompila tu código y deberías ver esta salida:
.column_calculated ancho: 50%; flotador izquierdo;
Nota: Dondequiera que Postcss-calc pueda resolver calc () a un valor estático lo emitirá en su código. Si no puede, no cambiará nada, por lo que aún puede usar calc () para los valores que deben ser manejados por el navegador en tiempo de ejecución.
Para el anidamiento, estamos usando el mismo complemento que se usa en el paquete PreCSS, por lo que puede consultar el tutorial anterior para obtener información completa sobre la sintaxis..
Instale postcss-anidado y luego pruebe que todo funciona correctamente al compilar este código:
.menú ancho: 100%; a texto-decoración: ninguno;
Su CSS resultante debe ser:
.menú ancho: 100%; .menu a text-decoration: none;
Por extensiones usaremos el plugin postcss-sass-extend. Nos dará una sintaxis de uso diferente a la que cubrimos en nuestro tutorial anterior sobre cómo trabajar con PreCSS. En lugar de extenderse se define con @ define-extend extend_name … se definen con % extend_name ….
Todavía se utilizan con la misma sintaxis de @extend% extend_name;.
Tenga en cuenta que el complemento postcss-sass-extend realmente se envía con PreCSS, sin embargo, asumo que no se carga por defecto, ya que cuando intenté usar la sintaxis requerida no se compiló.
Después de instalar postcss-sass-extend en su proyecto, pruébelo con el siguiente código:
% rounded_button border-radius: 0.5rem; relleno: 1em; ancho del borde: 0.0625rem; estilo de borde: sólido; .blue_button @extend% rounded_button; color de borde: # 2F74D1; color de fondo: # 3B8EFF; .red_button @extend% rounded_button; color de borde: # C41A1E; color de fondo: # FF2025;
Se debe compilar en:
.botón azul, botón .red radio del borde: 0.5rem; relleno: 1em; ancho del borde: 0.0625rem; estilo de borde: sólido; .blue_button border-color: # 2F74D1; color de fondo: # 3B8EFF; .red_button border-color: # C41A1E; color de fondo: # FF2025;
Hasta ahora hemos cubierto lo que podrían considerarse las funciones básicas comunes a la mayoría de los preprocesadores. Sin embargo, todavía hay más complementos disponibles para ofrecer funciones adicionales; algunas de estas funciones se encuentran en otros preprocesadores, y otras hay que ir a PostCSS para encontrarlas. Vamos a repasar brevemente estas opciones adicionales ahora.
La capacidad de modificar los colores puede ser una de las características más útiles que se encuentran en los preprocesadores. En realidad, hay varios complementos de color para PostCSS, pero estos son tres que se encuentran especialmente en casa en una configuración de preprocesamiento. Permiten varias transformaciones de color, como aclarado, oscurecimiento, saturación, adición de valores alfa y más.
La funcionalidad ofrecida por este plugin podría compararse con la combinación perfecta de Stylus, por lo que, en lugar de usar una sintaxis como @mixin, usted define trozos de código de tal manera que posteriormente puedan usarse en el código de la misma manera que una propiedad nativa, por ejemplo,.
/ * Definir una propiedad * / tamaño: $ tamaño altura: $ tamaño; ancho: $ tamaño; / * Úsalo como una propiedad nativa * / .square tamaño: 50px;
El complemento también se puede usar para redefinir las propiedades nativas para satisfacer sus necesidades.
La búsqueda de propiedades es una característica que se encuentra en Stylus que puede ser muy útil. Le permite buscar el valor de una propiedad dentro del mismo estilo. Por ejemplo, puede establecer un margen derecho para que coincida con el izquierdo con: margen izquierdo: 20px; margen derecho: @ margen izquierdo;
Mientras que el anidamiento regular que cubrimos anteriormente desenvuelve los selectores, el complemento postcss-nested-props desenvuelve las propiedades anidadas, por ejemplo:
/ * Código original * / .element border: width: 1px; estilo: sólido; color: #ccc; / * Después de procesar * / .element border-width: 1px; estilo de borde: sólido; color de borde: #ccc;
La coincidencia le ofrece otra forma de realizar verificaciones condicionales, esta vez utilizando la coincidencia de patrones como Rust, algo similar a cambiar las declaraciones en JavaScript o PHP. Esto le puede dar una manera más eficiente de verificar múltiples condiciones que escribir muchas @ si no cheques.
La generación de sprites CSS, una característica popular en Compass, también se puede realizar a través del complemento postcss-sprites. El complemento escaneará su CSS en busca de imágenes, combinará esas imágenes en una hoja de sprites y actualizará su código según sea necesario para que se muestre correctamente desde la nueva hoja de sprites..
Actualmente hay una lista muy sólida de complementos de extensión de idioma para elegir, más de lo que podemos cubrir aquí, así que consulte la lista completa en: https://github.com/postcss/postcss#language-extensions
Para muchas personas, la capacidad de escribir en sintaxis concisa y eficiente (normalmente sin punto y coma y llaves) es uno de los grandes atractivos de preprocesadores como Stylus o Sass. La versión 5.0 recién lanzada de PostCSS ahora admite analizadores personalizados que permitirán que se admitan nuevas sintaxis. SugarSS será el analizador de sintaxis concisa, y actualmente hay discusiones abiertas sobre cómo se estructurará esta sintaxis.
PostCSS aún es relativamente nuevo y puede encontrar algo que quiera lograr con su preprocesador personalizado para el cual actualmente no hay ningún complemento. La belleza de este ecosistema modular es que tiene la opción de resolver ese problema usted mismo creando su propio complemento. Cualquiera puede hacerlo, y la barrera de entrada es mucho menor que si intentara agregar su propia funcionalidad a Stylus, Sass o LESS. Aprenderemos como en un tutorial posterior..
No tiene que elegir entre PreCSS y su propio preprocesador si desea utilizar PostCSS. Si lo desea, puede optar por excluir completamente cualquier preprocesamiento basado en PostCSS, en lugar de utilizarlo junto con su preprocesador favorito.
En el siguiente tutorial aprenderemos cómo usar PostCSS junto con Stylus, Sass o LESS. Te veo allí!
