Share
En los últimos dos tutoriales, vimos formas de usar PreCSS en hojas de estilo completadas para mejorar la compatibilidad y optimización de su navegador, esencialmente como un enviar-procesador. En este tutorial aprenderá a usar PostCSS como un pre-procesador, de la misma manera que usaría Stylus, Sass o LESS.
Existen dos formas principales de utilizar PostCSS para el preprocesamiento. Una es seleccionar todos sus propios complementos para agregar la funcionalidad de preprocesador que desea, y la otra es instalar un paquete de complementos preseleccionados para que esté listo para comenzar de inmediato..
Comenzaremos con el enfoque más rápido y sencillo, instalando el excelente paquete de complementos PreCSS, creado por Jonathan Neal. En el tutorial después de esto, veremos cómo puede armar su propio preprocesador, utilizando solo la funcionalidad que desee..
Este tutorial asumirá que tiene cierto grado de familiaridad con las características que se encuentran comúnmente en los preprocesadores como Stylus, Sass o LESS. Eso es puramente porque nos enfocaremos en cómo puede utilizar estos mismos tipos de funciones a través de PostCSS, en lugar de qué Las características realmente hacen. Dicho esto, sin embargo, incluso si nunca ha usado un preprocesador, este podría ser el lugar perfecto para comenzar..
En la siguiente sección, veremos cómo configurar un proyecto Gulp o Grunt usando PreCSS. Sin embargo, si desea tomar un atajo (solo por ahora), también puede usar el área de juegos en vivo para ver el código Lo veremos en este tutorial. El código se puede escribir en la ventana izquierda, se compilará automáticamente y se mostrará en la ventana derecha.
PreCSS Live Editor: https://jonathantneal.github.io/precssLo 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 comandonpm instalar.
Ya sea que esté utilizando Gulp o Grunt, instale PreCSS en su proyecto con el comando:
npm instalar precss --save-dev
Si está utilizando Gulp, agregue esta variable debajo de las variables que ya están en el archivo:
Accentsconagua
var precss = require ('precss');Ahora agregue el nuevo nombre de variable en su procesadores formación:
procesadores var = [precss];
Haz una prueba rápida de que todo está funcionando ejecutando el comando trago css luego verifique que haya aparecido un nuevo archivo "style.css" en la carpeta "dest" de su proyecto.
Si estás usando Grunt, actualiza el procesadores objeto, que está anidado bajo la opciones objeto, a lo siguiente:
procesadores: [require ('precss') ()]Haz una prueba rápida de que todo está funcionando ejecutando el comando Grueso Postcss luego verifique que haya aparecido un nuevo archivo "style.css" en la carpeta "dest" de su proyecto.
Ahora tiene todo lo que necesita para usar PreCSS instalado y listo para funcionar. Esto significa que estamos listos para comenzar a revisar algunas de las capacidades de preprocesamiento de PreCSS y cómo se pueden usar..
En términos generales, la sintaxis de PreCSS es muy similar a la de Sass. Sin embargo, utiliza algunos de sus propios enfoques únicos, que cubriremos a medida que avancemos.
Nota: debido a la sintaxis similar a Sass de PreCSS, encontrará que un resaltador de sintaxis Sass funcionará mejor para usted en su editor de texto favorito.
La anidación es algo común a los tres preprocesadores principales, es decir, Stylus, Sass y LESS, y también está presente en PreCSS. La anidación en PreCSS se realiza de la misma manera que en Sass y LESS, colocando selectores dentro de las llaves de otros selectores.
La habilidad de usar el Y El símbolo para tener el selector padre duplicado en el selector hijo también funciona de la misma manera en PreCSS que en otros preprocesadores..
Intente agregar el siguiente código anidado a su archivo "src / style.css":
.menú ancho: 100%; a texto-decoración: ninguno; & :: antes de contenido: ";
Compila tu CSS con trago css o Grueso Postcss y su archivo "dest / style.css" debería haber evaluado el código anidado en lo siguiente:
.menú ancho: 100%; .menu a text-decoration: none; .menu :: antes de contenido: ";
Las variables son otro tipo de funcionalidad común a todos los preprocesadores y están incluidas en PreCSS. Lo único que normalmente difiere entre cada preprocesador es la sintaxis para denotar variables.
@ simboliza y coloca un : antes del valor. PS símbolo y colocar un = firmar antes del valor. PS simboliza y coloca un : antes del valor.De acuerdo con la tendencia de PreCSS a utilizar la sintaxis de Sass, también coloca un PS antes del nombre de la variable y una : antes del valor.
Pruebe a usar las variables PreCSS agregando esto a su archivo "src / style.css":
$ text_color: # 232323; cuerpo color: $ text_color;
Después de volver a compilar debería ver este código resultante:
cuerpo color: # 232323;
Condicionales, es decir. Si y más La lógica, es una característica que es muy fuerte tanto en Sass como en Stylus. LESS ofrece mixins protegidos, pero no ofrecen el mismo grado de potencia. Los condicionales están presentes en PreCSS y siguen la misma sintaxis que Sass, usando @Si y @más.
Agregue este código de ejemplo a su archivo "src / style.css":
$ column_layout: 2; .column @if $ column_layout == 2 width: 50%; flotador izquierdo; @else ancho: 100%;
En el ejemplo anterior estamos teniendo una .columna La salida de clase es diferente dependiendo de si queremos un diseño de una columna o un diseño de dos columnas. Tenemos el $ column_layout variable establecida en 2, es decir, deberíamos ver ancho: 50%; flotador izquierdo; salida en nuestra clase.
Compile su archivo, y debería ver lo siguiente en su archivo "dest / style.css".
.columna ancho: 50%; flotador izquierdo
Nota: el complemento postcss-advanced-variables que proporciona esta funcionalidad condicional es todavía bastante nuevo, y me he encontrado con un resultado inesperado cuando lo uso para condicionales más complejos, sin embargo, estoy seguro de que se actualizará en un futuro próximo.
Existe un complemento alternativo que se puede usar para condicionales denominados postcss-conditionals. Cubriremos cómo puede usar ese complemento (si lo desea) en el siguiente tutorial, "Cómo rodar su propio preprocesador".
@para y @cada Hay dos tipos de bucles disponibles en PreCSS, el @para y @cada bucles Ambos utilizan un enfoque que es como Sass. Los bucles "For" le permiten recorrer un contador numérico, mientras que los bucles "cada" le permiten recorrer una lista de elementos.
@para Buclesen un @para en el bucle hay una variable de "contador" que realiza un seguimiento de dónde se encuentra en el ciclo a través de su contador numérico, generalmente establecido como $ i. Por ejemplo, cuando la iteración de 1 a 3 habrá tres bucles; en el primero $ i será igual 1, el segundo será igual 2 y la tercera será igual 3.
Esta $ i La variable contador se puede interpolar tanto en selectores como en reglas, lo que puede ser muy útil para cosas como generar nth-of-type () Reglas y anchos de cálculo..
Agregue este código a su archivo "src / style.css" para probar un @para lazo:
@for $ i de 1 a 3 p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Después de la compilación debería ver este código expandido a:
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);
Nota: numeros 1, 2 y 3 Se han insertado en cada uno de los estilos anteriores..
@cada BuclesUn @cada ciclos de bucle a través de una lista de elementos en lugar de números. Al igual que con @para bucles, la variable que representa el elemento actual del bucle se puede interpolar en selectores y reglas. Tenga en cuenta que para interpolar en una cadena, debe insertar un conjunto de paréntesis en el nombre de la variable en el formato $ (var).
Dar utilizando PreCSS @cada realiza un bucle añadiendo el siguiente código de ejemplo:
$ social: twitter, facebook, youtube; @each $ icon in ($ social) .icon - $ (icon) background: url ('img / $ (icon) .png'); Después de la compilación debería ver que se ha generado el siguiente CSS:
.icon-twitter background: url ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube background: url ('img / youtube.png'); La sintaxis para la creación de mezclas es un aspecto de PreCSS que es un poco diferente a Sass.
En Sass, para definir una mezcla utilizas la sintaxis. @mixin mixin_name ($ arg1, $ arg2) … y luego usarlo con @include mixin_name (pass_arg1, pass_arg2);.
En PreCSS, por otro lado, define una mezcla con la sintaxis @ define-mixin mixin_name $ arg1, $ arg2 … y usarlo con @mixin mixin_name pass_arg1, pass_arg2;.
Agregue este ejemplo 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; @mixin icon youtube, rojo;En la compilación deberías ver:
.button.twitter background-image: url ('img / twitter.png'); color de fondo: azul; .button.youtube background-image: url ('img / youtube.png'); color de fondo: rojo; Nota: los argumentos pasados a través de la mezcla pueden ser interpolados en selectores y cadenas con el mismo enfoque que se menciona en @cada bucles de arriba con el formato $ (var).
Además de usar los mixins de la forma que se muestra arriba, también se pueden configurar para que consuman los bloques de contenido que se pasan al llamar al mixin. Este es esencialmente el mismo proceso que con Sass ' @contenido.
Por ejemplo, modifique la mezcla del ejemplo anterior, colocando @ mixin-content donde desea que aparezca un bloque de contenido pasado, como:
@ define-mixin icon $ network, $ color .button. $ (network) background-image: url ('img / $ (network) .png'); color de fondo: $ color; @ mixin-content; Cuando se incorpore una mezcla. @ mixin-content se utiliza, se debe colocar entre corchetes, en lugar de en una sola línea que termina con una ;, o no podrá compilar.
Actualice su código para que sus llamadas de mezcla se vean así:
Icono de @mixin twitter, azul ancho: 3rem; icono de @mixin youtube, rojo ancho: 4rem;
Después de la compilación, esto debería producir el siguiente código: observe la inclusión del anchura contenido pasado a través de cada uso de la mezcla:
.button.twitter background-image: url ('img / twitter.png'); color de fondo: azul; ancho: 3rem; .button.youtube background-image: url ('img / youtube.png'); color de fondo: rojo; ancho: 4rem; Las extensiones son similares a las mezclas en cierto sentido, ya que están diseñadas para permitirle reutilizar bloques de código. Sin embargo, la idea detrás de "ampliaciones" es crear un conjunto base de código que sepa que va a usar exactamente de la misma manera varias veces para un determinado tipo de elemento. Posteriormente, puede ampliar esa base con un código adicional no predeterminado..
En PreCSS, la sintaxis para definir una extensión es @ define-extend extend_name ….
En su archivo "src / style.css", defina una extensión que contenga los estilos base para un botón redondeado así:
@ define-extendido rounded_button border-radius: 0.5rem; relleno: 1em; ancho del borde: 0.0625rem; estilo de borde: sólido;
Este conjunto predeterminado de estilos ya está listo para ser extendido con código adicional, por ejemplo, configurando cosas como color de fondo y color del borde. Esto se hace usando la sintaxis @extender extend_name; Importar los estilos base definidos en la extensión..
Agregue este código de ejemplo, debajo del código que acaba de agregar:
.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;
Donde el @extend rounded_button; Se utiliza la línea, se insertará todo el contenido de la extensión..
Compila tus estilos y obtendrás:
.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;
Tenga en cuenta también que los estilos comunes a la .botón azul y .botón rojo clase se han combinado para la eficiencia.
El plugin utilizado para alinear hojas de estilo a través de @importar Es el mismo que cubrimos en el tutorial anterior de esta serie: para Minificación y Optimización. Para obtener un resumen de cómo funciona, consulte y lea la sección titulada “Inline / Combine Files with @import”.
En el contexto de usar PostCSS como preprocesador, las importaciones son aún más útiles, ya que le dan la opción de configurar parciales, algo a lo que podría estar acostumbrado desde otras soluciones de preproceso. Por ejemplo, puede configurar una carpeta de "parciales", separar su proyecto en archivos parciales lógicamente discretos y luego importarlos así:
@import "partials / _variables.css"; @import "partials / _utilities.css"; @import "partials / _mixins.css"; @import "partials / _extends.css";
Espero que ahora tenga alguna idea de lo poderoso que puede ser PostCSS como preprocesador a través del paquete PreCSS. Para resumir lo que hemos cubierto anteriormente:
@ define-mixin mixin_name $ arg1, $ arg2 … @mixin mixin_name pass_arg1, pass_arg2; @ mixin-content Se puede utilizar de la misma manera que Sass '. @contenido @ define-extend extend_name …@extender extend_name;@importar inserta archivos CSS externos, particularmente útil para usar parcialesPreCSS es un proyecto fantástico, que reúne a algunos excelentes complementos de extensión de lenguaje y hace que el preprocesamiento basado en PostCSS sea prácticamente plug and play. Proporciona casi toda la funcionalidad que la mayoría de los usuarios de preprocesadores han llegado a esperar, y es una manera rápida y sencilla de hacer que la bola del preprocesador PostCSS funcione..
Usar PreCSS es uno de los dos métodos de preprocesamiento de PostCSS que mencionamos al inicio de este tutorial. El otro método es configurar su propio preprocesador, seleccionando a mano los complementos de extensión de idioma que se adaptan a sus propios proyectos o estilo de codificación. La compensación es que es un poco más de configuración, pero a cambio tienes la libertad de armar un preprocesador que funciona como quieras..
Aprenderá cómo hacer esto en el siguiente tutorial, "Rueda su propio preprocesador".
