Hasta ahora hemos usado PostCSS para hacer cosas como optimizar hojas de estilo, agregar funcionalidad para el preprocesamiento y generar ciertas convenciones de nomenclatura de clases, pero ¿cómo puede ayudar simplemente a escribir CSS antiguo??
Hay tantos pequeños trozos de código que el diseñador web promedio escribe miles de veces a lo largo de su carrera, y si puede recuperar un poco de tiempo en cada uno de ellos, se suma mucho al final..
En este tutorial vamos a utilizar PostCSS para reducir el tiempo de escritura de códigos de todos los días a través de una serie de accesos directos y adiciones de taquigrafía. Vamos a empezar!
Configura tu proyecto
Ya estará familiarizado con este proceso, pero lo primero que tendrá que hacer es configurar su proyecto para usar Gulp o Grunt. 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, por lo que le resultará un poco más sencillo trabajar con.
Puede leer acerca de cómo configurar proyectos Gulp o Grunt para PostCSS en los tutoriales anteriores
Guía de inicio rápido de PostCSS: configuración de Gulp o
Guía de inicio rápido de PostCSS: Grunt Setup
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.
Instalar complementos
Para este tutorial instalaremos varios complementos, cada uno de los cuales manejará un tipo de atajo o atajo diferente..
Ya sea que esté utilizando Gulp o Grunt, ejecute el siguiente comando dentro de la carpeta de su proyecto para instalar los complementos que usaremos:
Ahora estamos listos para cargar los complementos en su proyecto..
Cargar complementos a través de Gulp
Si está utilizando Gulp, agregue estas variables debajo de las variables que ya están en el archivo:
var alias = require ('postcss-alias'); var crip = require ('postcss-crip'); var magician = require ('postcss-font-magician'); var triangle = require ('postcss-triangle'); var circle = require ('postcss-circle'); var linkColors = require ('postcss-all-link-colors'); var center = require ('postcss-center'); var clearfix = require ('postcss-clearfix'); var position = require ('postcss-position'); var size = require ('postcss-size'); var verthorz = require ('postcss-verthorz'); var colorShort = require ('postcss-color-short');
Ahora agregue cada uno de esos nuevos nombres de variables en su procesadores formación:
procesadores var = [alias, crip, mago, triángulo, círculo, linkColors, center, clearfix, position, size, verthorz, colorShort];
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.
Cargar complementos a través de Grunt
Si estás usando Grunt, actualiza el procesadores objeto, que está anidado bajo la opciones objeto, a lo siguiente:
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.
Muy bien, ahora que todos tus complementos están instalados, aprendamos a usarlos para los atajos de CSS y la taquigrafía..
Usa la taquigrafía para las propiedades
Hay un montón de propiedades que tenemos que escribir una y otra vez y más de nuevo en CSS. Claro, el tiempo que toma escribir un puñado de caracteres una vez es muy pequeño, pero con los años de desarrollo todo se va sumando. Vamos a ver aquí dos complementos que te permiten recortar esas propiedades a versiones abreviadas para que puedas obtener un flujo rápido y suave a medida que elaboras tu CSS.
Define tu propia taquigrafía
El plugin postcss-alias de Sean King le permite definir su propia abreviatura, o "alias", para cualquier propiedad que desee abreviar. Esto le brinda una manera de asegurarse de que la taquigrafía que usa se ajuste a la forma en que funciona su mente y, por lo tanto, es fácil de recordar..
Para definir algunos alias, agregue una regla en la parte superior de su hoja de estilos con la sintaxis @alias … . Luego, dentro de la regla at, configure sus alias agregando nombre de alias: nombre de propiedad;.
Agregue el siguiente ejemplo a su archivo "src / style.css", que configurará los alias para el tamaño de borde, estilo de borde y color del borde propiedades:
@alias bsz: tamaño de borde; bst: estilo de borde; bcl: color del borde;
Luego agregue este código para probar utilizando los nuevos alias:
.set_border bsz: 1px; bst: sólido; bcl: #ccc;
Compile su archivo, y en su archivo "dest / style.css" debería ver ahora:
.set_border border-size: 1px; estilo de borde: sólido; color de borde: #ccc;
Lea más sobre postcss-alias en: https://github.com/seaneking/postcss-alias
Plug 'n' Play Shorthand
Si desea utilizar una gran cantidad de abreviaturas de propiedades, pero no desea seguir los pasos para definir cada una de ellas, puede consultar el complemento postcss-crip de Johnie Hjelm, que tiene cientos de abreviaturas de propiedades listas para agregar y uso del juego.
Por ejemplo, agregue el siguiente código a su archivo "src / style.css", que contiene una taquigrafía para el margen superior, margen derecho, margen inferior y margen izquierdo propiedades:
Lea más acerca de postcss-crip en: https://github.com/johnie/postcss-crip
Y vea la lista completa de abreviaturas de propiedades en: https://github.com/johnie/crip-css-properties
Salida @ font-face en una línea
El plugin postcss-font-magician de Jonathan Neal está a la altura de su nombre. Te permite utilizar fuentes personalizadas a través de un simple Familia tipográfica gobierne como si estuviera usando una fuente estándar, y la fuente simplemente funcionará mágicamente.
Agregue el siguiente código a su archivo "src / style.css":
body font-family: "Indie Flower";
Eso es. Eso es todo lo que se necesita para hacer uso de postcss-font-magician. Sin una sintaxis especial, solo use el nombre de la fuente como lo haría con cualquier otro.
En este caso, la fuente Indie Flower es una que seleccioné de la biblioteca Google Fonts. No he agregado ningún archivo de fuente personalizado a mi proyecto, por lo que el complemento lo verá y en su lugar irá a verificar si mi fuente especificada está disponible en Google Fonts. Cuando encuentre que está disponible, creará el apropiado @Perfil delantero código completamente automático.
Compile su archivo y luego mire su archivo "dest / style.css", donde verá que este código se ha agregado en:
@ font-face font-family: "Indie Flower"; estilo de letra: normal; peso de la fuente: 400; src: local ("Indie Flower"), local (IndieFlower), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nZ2MAKAc2x4R1uOSeegc5U.eot?#) formato ("eot"), url (// fonts). gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) formato ("jp" de la categoría de juego), url / g / a / g / a / g / g / s / indiefl / v7/10 );
Puede verificar que la fuente se esté cargando correctamente creando un nuevo archivo en su carpeta "dest" llamada "index.html" y agregando este código a la misma:
Título de prueba
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium bibendum nisl. Mauris eget orci eget nisi tristique lobortis. Pellentesque rutrum id ligula quis tempus. Vivamus tempus, justo en semper volutpat, lorem justo tincidunt urna, en mattis lorem dolor condimentum diam. Ut dapibus nunc auctor felis viverra posuere. Aenean efficitur efficitur nisi. Vivamus leo felis, sempre quis rutrum eu, eleifend eu quam.
Para que las fuentes se carguen, necesitará ver este archivo a través de un http: // dirección, en lugar de una expediente:// dirección, así que cargue el archivo en un servidor web o use una aplicación como Prepros para crear una vista previa en vivo.
Debería ver la fuente Indie Flower aplicada a todo su texto, así:
Lea más acerca de postcss-font-magician aquí: https://github.com/jonathantneal/postcss-font-magician
Crear formas CSS
Si alguna vez ha usado CSS puro para crear formas, sabrá que puede ser una excelente manera de incluir elementos como círculos y triángulos en sus diseños, pero que también puede ser bastante complicado. Particularmente en el caso de los triángulos, descubrir qué código necesita para obtener una forma orientada en la dirección correcta y en el tamaño correcto puede parecer algo contrario a la intuición..
Ahí es donde los complementos postcss-circle y postcss-triangle de Jed Mao vienen al rescate. Ambos complementos crean una sintaxis simplificada y una forma intuitiva de crear círculos y triángulos con CSS puro.
Agregar un circulo
Para crear un círculo, usa la sintaxis círculo: tamaño color;. Agregue el siguiente código a su archivo "src / style.css":
.circulo circulo: 8rem # c00;
Compílalo y verás el siguiente código agregado a tu archivo "dest / style.css":
.círculo radio del borde: 50%; ancho: 8rem; altura: 8rem; color de fondo: # c00;
Ahora agregue este HTML al archivo "dest / index.html" que creó en la última sección:
Eche un vistazo a su archivo en un navegador y ahora debería ver un círculo rojo:
Lea más acerca de postcss-circle en: https://github.com/jedmao/postcss-circle
Añadir un triángulo
Hay tres tipos de triángulos que puedes agregar usando este complemento; Isósceles, isósceles de derecha y equilátero. Cada uno tiene conjuntos de sintaxis ligeramente diferentes, que puedes leer en su totalidad en el repositorio de Github del complemento..
Iremos a través de la adición de un triángulo isósceles, cuya sintaxis es:
triángulo: apuntando-; anchura: ; altura: ; color de fondo: ;
Agreguemos este ejemplo del triángulo isósceles a nuestro archivo "src / style.css":
.isósceles-triángulo triángulo: apuntando hacia la derecha; ancho: 7rem; altura: 8rem; color de fondo: # c00;
Compile el archivo y ahora debería ver un triángulo completo de CSS en su archivo "dest / style.css":
.isósceles-triangle ancho: 0; altura: 0; estilo de borde: sólido; color del borde: transparente; ancho del borde: 4rem 0 4rem 7rem; color de borde izquierdo: # c00;
Para ver el triángulo en su archivo "dest / index.html" agregue este html:
Al actualizar este archivo en su navegador, ahora debería ver un triángulo isósceles rojo que apunta a la derecha:
Lea más acerca de postcss-triangle en: https://github.com/jedmao/postcss-triangle
Utilizar accesos directos para tareas comunes
Establecer el estilo de enlace
La configuración de colores para los enlaces es un trabajo que se debe realizar en cada proyecto y requiere la configuración de estilos para los enlaces predeterminados, así como cuatro estados de enlace diferentes. El plugin postcss-all-link-colors de Jed Mao te permite atajar ese proceso, generando los colores de todos tus enlaces a la vez..
Agregue lo siguiente a su "src / style.css":
a @ link-colors all # 4D9ACC;
Luego, compile su archivo y verá que todos los estados de enlace requeridos se han establecido:
También tiene la opción de generar un color diferente para un estado específico. Solo agregue algunas llaves al final de la regla, y dentro de eso use la sintaxis estado: color;.
Actualice el código que acaba de agregar a su archivo "src / style.css" a lo siguiente:
a @ link-colors all # 4D9ACC hover: # 5BB8F4;
Ahora, cuando compiles, verás que el estado de hover tiene un color diferente al del resto de estilos:
Lea más acerca de postcss-all-link-colors en: https://github.com/jedmao/postcss-all-link-colors
Centro vertical o horizontalmente
Centrar, ya sea vertical u horizontalmente, es una de esas tareas que es una espina perpetua para los desarrolladores de CSS. El plugin postcss-center de Jed Mao simplifica mucho la tarea con la introducción de centro Superior; para centrado vertical, y izquierda: centro; para centrado horizontal.
Agregue este código a su archivo "src / style.css":
Nota: el centrado usa posicionamiento absoluto, por lo que deberá envolver sus elementos centrados con un padre que use posicionamiento relativo, absoluto o fijo. Dado que los elementos posicionados de manera absoluta no afectan la altura o el ancho de sus elementos primarios, también querrá ajustar la altura y el ancho del elemento principal para que se adapte.
Por ejemplo, agregar izquierda: centro; al .circulo clase que creaste anteriormente para que se centre horizontalmente:
.circulo circulo: 8rem # c00; izquierda: centro;
Luego, agregue esta segunda clase para que actúe como una envoltura alrededor del círculo, dándole una posición relativa y una altura que coincida con el círculo:
.circle_wrap posición: relativa; altura: 8rem;
Ahora agregue un elemento con esta clase como envoltorio alrededor de su html de círculo existente:
Cuando regrese y actualice su página, debería ver que su círculo se ha centrado horizontalmente:
Lea más acerca de postcss-center en: https://github.com/jedmao/postcss-center
Salida Clearfix en una línea
En cualquier diseño que incorpore flotadores, crear una clase de clearfix es tan práctico que es casi esencial. El plugin postcss-clearfix de Sean King convierte la creación de ese estilo de clearfix en un trabajo de una línea, agregando fijar como un posible valor que puede ser utilizado con el claro propiedad.
Para un clearfix que funcione en IE8 + agregue lo siguiente a su archivo "src / style.css":
.clearfixed clear: fix;
Al compilar, verás que ha producido el siguiente código de clearfix, listo para usar:
.clearfixed: after content: "; display: table; clear: both;
Si necesita un clearfix que funcione en IE6 + use el valor arreglo legado en lugar de simple fijar, al igual que:
.clearfixed_legacy clear: fix-legacy;
Cuando se compile este código, verás que incluye un poco de contenido adicional que lo hace compatible con los navegadores heredados:
.clearfixed_legacy: before, .clearfixed_legacy: after content: "; display: table; .clearfixed_legacy: after clear: both; .clearfixed_legacy zoom: 1;
Lea más acerca de postcss-clearfix en: https://github.com/seaneking/postcss-clearfix
Establecer posicionamiento en una línea
Cuando desee utilizar un posicionamiento no predeterminado, es decir,. absoluto, fijo o relativo, Tienes que escribir los valores para el elemento parte superior, Correcto, fondo y izquierda Posicionamiento manual. No hay una taquigrafía como la que podría usar al configurar márgenes o relleno en una línea. Es decir, hasta que instales el plugin de posición postcss de Sean King.
Con este plugin, al utilizar el posición propiedad, después de establecer un valor de absoluto / fijo / relativo, puedes declarar parte superior, Correcto, fondo y izquierda valores en la misma linea.
Agregue el siguiente código de ejemplo a su archivo "src / style.css":
.posición absoluta: 1rem absoluta 1rem 0 0;
Después de la compilación, verá que la taquigrafía se ha compilado en las líneas separadas que normalmente tendría que escribir manualmente.
La forma en que se declaran estos valores es con el mismo patrón que en margen o relleno taquigrafía, es decir, también puede establecer arriba y abajo en el primer valor, luego a la derecha y la izquierda en el segundo, o puede establecer un valor para aplicar a los cuatro.
Lea más acerca de postcss-position en: https://github.com/seaneking/postcss-position
Establecer ancho y altura a la vez
El plugin de tamaño postcss de Andrey Sitnik le permite procesar el uso frecuente anchura y altura propiedades abajo en una sola tamaño propiedad. Puede usarlo de dos maneras: pasando dos valores con la primera evaluación de ancho y la segunda a altura, o pasando un valor que se usará tanto para ancho como para alto.
Pruebe esto agregando el siguiente CSS a su archivo "src / style.css":
.size_a size: 1rem 2rem; .size_b size: 1rem;
En la compilación, debería ver este código ahora en su archivo "dest / style.css":
Lea más acerca de postcss-size en: https://github.com/postcss/postcss-size
Establecer espaciado vertical y horizontal
Como gran amante de la codificación eficiente, al escribir márgenes y rellenos, que a menudo son iguales en ambos lados, a menudo me encontré deseando que hubiera un atajo para declarar el espaciado vertical y horizontal a la vez. Incluso escribí unos cuantos mixins de preprocesador para hacer precisamente eso. Pero ya no necesitaré esos mixins gracias al complemento postcss-verthorz de David Hemphill.
Con este plugin puedes usar relleno-vert o margen-vert para establecer el espaciado vertical, y relleno-horz o margen-horz para establecer el espaciado horizontal. Agregue el siguiente código de ejemplo a su archivo "src / style.css" para ver cómo funciona:
.spacing padding-vert: 1rem; margen-horz: 2rem;
Después de la compilación, verá que estas reglas se han expandido a rellenos completos y declaraciones de márgenes..
.spacing padding-top: 1rem; parte inferior de relleno: 1rem; margen izquierdo: 2rem; margen derecho: 2rem;
También puede hacer un acceso directo a estas propiedades aún más al abreviarlas en dos letras. El código de ejemplo que utilizamos anteriormente podría abreviarse como sigue y la salida sería exactamente la misma:
.spacing_short pv: 1rem; mh: 2rem;
Lea más sobre postcss-verthorz en: https://github.com/davidhemphill/postcss-verthorz
Códigos de color de salida
Mi color de texto predeterminado favorito es # 232323 y no sé si soy solo yo, pero me canso de escribir esos dos dígitos una y otra vez. A menudo deseaba que hubiera un atajo, similar a la forma en que puedes recortar #ffffff Abajo a #fff. Con el plugin postcss-color-short de Andrey Polischuk, hay.
Al usar este complemento, si establece un código de color de dos dígitos, esos dígitos se repetirán hasta que se cree un código de seis dígitos, por ejemplo. # 23 se convertirá # 232323. Si establece un código de color de un dígito, se repetirá hasta que haya tres dígitos, por ejemplo,. #F se convertirá #fff. Incluso puedes usarlo para configurar rgba () colores, donde el primer dígito que pase se repetirá tres veces, y el segundo se usará como valor alfa, por ejemplo,. rgba (0, 0.5) se convertirá rgba (0, 0, 0, 0.5).
Agregue lo siguiente a su archivo "src / style.css" para probar todo lo anterior:
.short_colors color: # 23; fondo: #f; color de borde: rgba (0, 0.5);
Después de la compilación verás que todos los colores han sido impresos en su forma completa:
.short_colors color: # 232323; fondo: #fff; color de borde: rgba (0, 0, 0, 0.5);
Lea más acerca de postcss-color-short en: https://github.com/andrepolischuk/postcss-color-short
Resumiendo
Repasemos rápidamente todo lo que hemos visto en este tutorial:
Las tareas de codificación pequeñas cada día no parecen ser muy individuales, pero suman una gran cantidad de tiempo en general, por lo que vale la pena hacer un acceso directo a ellas.
El complemento postcss-alias te permite crear tu propia abreviatura de propiedades
El plugin postcss-crip tiene cientos de abreviaturas de propiedades predefinidas
El postcss-font-magician le permite usar fuentes personalizadas como si fueran fuentes predeterminadas, generándose automáticamente @Perfil delantero código para ti
Los complementos postcss-circle y postcss-triangle hacen que la creación de círculos y triángulos CSS sea directa e intuitiva
El plugin postcss-all-link-colors le permite imprimir colores para todos sus estados de enlace a la vez
El plugin postcss-center proporciona centrado vertical y horizontal con centro Superior; y izquierda: centro;
El complemento postcss-clearfix le permite generar código clearfix con claro: arreglar;
El plugin postcss-position le permite agregar su parte superior, Correcto, fondo y izquierda configuración como parte de su uso de la posición propiedad
El complemento de tamaño postcss te permite configurar el ancho y la altura de una vez
El complemento postcss-verthorz permite que el espaciado horizontal y el espaciado vertical se impriman con reglas simples.
El plugin postcss-color-short te da la posibilidad de usar códigos hexadecimales de uno y dos dígitos, y otros métodos abreviados de color.
En el siguiente tutorial
En el siguiente tutorial, pasaremos a los complementos que son geniales, pero que no pertenecen a ninguna categoría en particular. Te veré pronto en "Misceláneos Misceláneos".
Share
Accentsconagua
