Hola lector En su camino a aprender diseños, ¿ha aprendido CSS y quiere seguir adelante? Luego a ti debajo del gato. Precaución, mucho código.
En este artículo, revisaré los preprocesadores y postprocesadores.
No entraré en detalles sobre CSS, lo que implica que ya lo sabes. Voy a nombrar clases en notación
BEM . Además, no profundizaré en la instalación y configuración de todo lo que escribo, pero dejaré enlaces que puede seguir y aprenderé cómo hacerlo usted mismo.
Comencemos con los preprocesadores.
Preprocesadores
¿Qué es un preprocesador fuera de contexto con CSS?
Vicki sabe la respuesta.
¿Qué es un preprocesador en el contexto de CSS? En nuestro caso, el preprocesador es un programa que recibe el código escrito en el lenguaje del preprocesador como entrada, y en la salida obtenemos CSS que podemos dar entrada a nuestro navegador.
¿Qué son los preprocesadores? Hay varios representantes, por ejemplo:
Sass (.sass, .scss),
Less (.less) y
Stylys (.stylus).
También entre los preprocesadores,
PostCSS (o más bien su analizador SugarSS y el complemento PreCSS) se pueden identificar por separado. Mirando hacia el futuro, diré que sí, PostCSS no es solo un postprocesador.
Haré una revisión sobre el ejemplo de Sass. Más precisamente, en su nueva sintaxis: SCSS, ya que está más cerca de CSS que la sintaxis anterior. Comencemos con las capacidades que agregan los preprocesadores que no están en CSS, y terminemos con los problemas que se están resolviendo.
Las posibilidades
Variables
//style.scss $color: #fff; span { color: $color; background: $color; } //style.css span { color: #fff; background: #fff; }
La utilidad de las variables es difícil de sobreestimar. Ahora puede dar nombres significativos a los colores ($ tomate: rgb (255,99,71)), calcular valores no a través de constantes, sino a través de variables (altura: $ body_height - $ footer_height) y mucho más. Muchos pueden argumentar que hay variables en CSS. Pero
Can I Use dice que no hay soporte para IE (y por razones obvias, no se espera).
Anidamiento
//style.scss .chat-area { width: 40%; &__button { // & - ( & = .chat-area) display: inline-block; height:36px; width: 10px; } a { color: red; } } //style.css .chat-area { width: 40%; } .chat-area__button { display: inline-block; height:36px; width: 10px; } .chat-area a { color: red; }
Al comienzo del artículo, me referí a BEM. En este ejemplo, el elemento con la clase de área de chat es un bloque. En caso de que haya una necesidad repentina de cambiarle el nombre, ahora será posible hacerlo en un solo lugar, y esto se convierte en una rutina si se escriben varias docenas de selectores en un archivo que contiene el nombre del bloque. También quiero señalar que este es un tipo de protección contra errores tipográficos, porque el nombre del bloque se escribe una vez.
Mixins
//style.scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } //style.css .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
Los mixins son uno de los temas más difíciles de entender. En términos generales, un mixin es una función que toma argumentos y aplica reglas que dependen de esos argumentos a un selector dado. En este ejemplo, la mezcla de borde y radio se aplicó al selector .box
Funciones adicionales
//style.scss $color: #202020; h1, h2 { color: lighten($color, 40%); } //style.css h1, h2 { color: #868686; }
Básicamente, las nuevas funciones facilitan el trabajo con el color. Por ejemplo, la función aclarar: aclara el color en la cantidad especificada de porcentaje (lo opuesto es la función oscurecer).
Problemas resueltos
Modularidad
El problema con la
importación estándar es que crea una solicitud adicional al servidor, que es una operación costosa. Sería bueno si la
importación insertara inmediatamente todo el texto de la importación en el archivo fuente, ¿verdad?
De una forma u otra, no había preprocesadores antes, y el problema tenía que resolverse de alguna manera. Por ejemplo, puede escribir todo el código en un archivo.
Sin embargo, tenemos preprocesadores y resolverán este problema por nosotros. El preprocesador anula la
importación estándar y ahora, en lugar de preguntar por el servidor, inserta la importación en el archivo de origen, tal como yo quería.
//style.scss @import "selector1"; @import "selector2"; //selector1.scss span { color: white; } //selector2.scss div { color: gold; } //style.css div { color: gold; } span { color: white; }
Tenga en cuenta que los archivos de origen se convirtieron en uno. Una solicitud al servidor de estadísticas: una respuesta.
Herencia
<sarcasm> Tenemos clases, pero no herencia, ¿cómo? </sarcasm>. Ahora es posible seleccionar los llamados "selectores de plantilla" y expandirlos con otros selectores.
// style.scss %equal-heights { // height: 100%; } %message { // padding: 10px; } .success { @extend %message; color: green; } .error { @extend %message; color: red; } // style.css .success, .error { padding: 10px; } .success { color: green; } .error { color: red; }
La belleza de los selectores de plantillas es que no encajan en los estilos generados. El ecualizador de plantilla% equal-heights no estuvo involucrado en el código y no dejó ningún rastro en CSS. El mensaje selector% se reflejó en forma de reglas para los selectores que lo expandieron. Puede heredar de selectores comunes, pero es preferible usar selectores de plantilla para que no haya exceso de basura.
Formateo
Después de escribir el código, debe formatearse (comprimido para producción). Puede hacerlo con la ayuda de coleccionistas como webpack, o puede hacerlo a través de herramientas estándar.
Hay 4 tipos de formato en Sass.
//expanded span { color: gold; display: block; } div { color: red; } //nested span { color: gold; display: block; } div { color: red; } //compact span { color: gold; display: block; } div { color: red; } //compressed span{color:gold;display:block}div{color:red}
expandido: más similar al código escrito por humanos.
anidado: aproximado al formato de la sintaxis anterior. La legibilidad no se pierde, pero es un problema de Hollywood.
compacto: aún mantiene la legibilidad, pero con dificultad. Útil para determinar el número de selectores en un proyecto a simple vista.
comprimido - Formato ya completamente ilegible. Todos los caracteres que se pueden eliminar se eliminan. Adecuado para alimentar el navegador.
Postdata
No entendí algunas de las características agregadas por Sass. Por ejemplo,
bucles o
características de operadores aritméticos . Los dejaré para que te familiarices.
Postprocesadores
Habiendo tratado con preprocesadores, pasamos a postprocesadores.
En el contexto de Css, el postprocesador es esencialmente el mismo que el preprocesador, pero la entrada al postprocesador no recibe un código escrito en el lenguaje del preprocesador, sino también css. Es decir, el postprocesador es un programa en la entrada de la cual se da css, y la salida es css. No está muy claro por qué esto es necesario.
Explicaré un ejemplo concreto del funcionamiento de
PostCSS , el único representante de los posprocesadores en el contexto de css.
PostCSS listo para usar realmente no hace nada con CSS. Simplemente devuelve el archivo que se le dio en la entrada. Los cambios comienzan cuando los complementos están conectados a PostCSS.
El ciclo completo de PostCSS se puede describir de la siguiente manera:
- El archivo fuente se entrega a la entrada PostCSS y se analiza.
- El complemento 1 hace algo
- ...
- El complemento n hace algo
- El resultado se convierte en una cadena y se escribe en el archivo de salida.
Considere los principales complementos que existen en el ecosistema PostCSS
Complementos
Autoprefixer
Este complemento es tan popular que muchas personas piensan que usan este complemento pero no usan PostCSS. Están equivocados
//in.css div { display: flex } //out.css div { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex }
Autoprefixer agrega prefijos de navegador a sus reglas. Uno de los complementos más importantes que comenzó la historia de PostCSS sin nada reemplazable. Incluso podría decir que tiene sentido poner PostCss solo por el bien de este complemento.
Env preestablecido
//in.css @custom-media --med (width <= 50rem); @media (--med) { a:hover { color: color-mod(black alpha(54%)); } } //out.css @media (max-width: 50rem) { a:hover { color: rgba(0, 0, 0, 0.54); } }
PostCSS Preset Env agrega características que solo se discuten en borradores preliminares de desarrolladores CSS. En este ejemplo, se implementó la directiva @ custom-media, así como la función de mod de color. ¡Comience a usar el CSS del futuro hoy!
Módulos CSS
Todos estos BEM no son para usted, pero ¿hay algún problema con los conflictos de nombres de clase? Entonces PostCSS ofrece una solución diferente.
//in.css .name { color: gray; } //out.css .Logo__name__SVK0g { color: gray; }
Los Módulos CSS cambian los nombres de las clases de acuerdo con cierto patrón (todo es personalizable). Ahora no sabemos de antemano el nombre de la clase, porque se determina dinámicamente. ¿Cómo ahora clasificar los elementos si no los conocemos de antemano? Combinando PostCSS, Webpack y ES6 puedo ofrecer esta solución:
import './style.css';
Ahora no solo estamos importando un archivo con estilos (por ejemplo, en el archivo React de un componente) y sustituyendo valores que conocemos antes, sino importando un objeto. Las claves de este objeto serán los selectores originales, y los valores se convertirán. Es decir, en este ejemplo, styles ['name'] = 'Logo__name__SVK0g'.
Corto
//in.css .icon { size: 48px; } .canvas { color: #abccfc #212231; } //out.css .icon { width: 48px; height: 48px; } .canvas { color: #abccfc; background-color: #212231; }
PostCSS Short agrega un montón de entradas acortadas para varias reglas. El código se está acortando y, por lo tanto, hay menos espacio para errores. Además aumenta la legibilidad.
Reinicio automático
//in.css div { margin: 10px; } a { color: blue; } //out.css div, a { all: initial; } div { margin: 10px; } a { color: blue; }
PostCSS Auto Reset nos permite no crear un archivo separado con un reinicio de todos los estilos. El complemento crea un selector grande para todos los selectores, donde coloca las reglas y restablece todos los estilos. Por defecto, solo la regla all se crea con el valor inicial. Esto es útil en combinación con el
complemento postcss-initial , que a su vez convierte esta regla en una bolsa de reglas para 4 pantallas. Sin embargo, todo se puede configurar y restablecer, por ejemplo, de esta manera:
//out.css div, a { margin: 0; padding: 0; } div { margin: 10px; } a { color: blue; }
¿Recuerdas que al principio del artículo dije que PostCSS no es solo un postprocesador?
PostCSS - preprocesador?
Considere un analizador y un complemento, después de lo cual cambiará su opinión actual sobre PostCSS.
Sugararss
//in.sss .parent color: white .parent > .child color: black //out.css .parent { color: white } .parent > .child { color: black }
SugarSS es un analizador sintáctico (no un complemento), que se basa en la
sangría , y no en llaves, como estándar. Tiene una extensión separada ".sss". El código escrito usando SugarSS es similar en estilo a la sintaxis Sass anterior, pero sin sus lociones como variables, mixins, herencia, etc.
¿Adivinaste qué agregará el próximo complemento?
Precss
//in.sss $color: black .parent .child color: $color // SugarSS $color: black; .parent { .child { color: $color } } //out.css .parent .child { color: black }
PreCSS simplemente agrega las capacidades de los preprocesadores que se escriben en la primera mitad del artículo.
¿Y por qué PostCSS no es un preprocesador ahora?
Pelusa
Ya se ha
escrito mucho sobre
Stylelint . Se metió en esta revisión porque usa PostCSS como un analizador de líneas de archivos CSS. Supongamos que tenemos un archivo así.
a { color: rgb(1, 1, 1) } div { color: rgb(0, 0, 0) }
Aquí está su salida para el archivo actual:
2:21 Expected a trailing semicolon declaration-block-trailing-semicolon 6:21 Expected a trailing semicolon declaration-block-trailing-semicolon 7:1 Unexpected missing end-of-source newline no-missing-end-of-source-newline
La utilidad de esta herramienta es bastante difícil de sobreestimar.
Conclusiones
Los preprocesadores agregan muchas funcionalidades nuevas que no están en CSS. Una vez que lo intentes, difícilmente volverás a CSS normal.
PostCSS está mucho más cerca del CSS original que los preprocesadores, pero sin embargo, con ciertos complementos conectados, puede tener la misma funcionalidad (e incluso una sintaxis similar). Los principiantes pueden componer sin siquiera pensar que los diseños no están en CSS puro. Algunos complementos (por ejemplo, Autoprefixer) no tienen análogos en el mundo de los preprocesadores.
Nadie se molesta en usar preprocesadores y PostCSS en conjunto. La opción es bastante buena para proyectos que ya usan preprocesadores y tienen una vivienda.
Para nuevos proyectos, recomendaría usar solo PostCSS. Los diseñadores de diseño están acostumbrados a la sintaxis del preprocesador? Instale el complemento PreCSS y el analizador SugarSS. ¿Necesita compatibilidad entre navegadores? Instale el complemento Autoprefixer. ¿Ya no es necesaria la compatibilidad entre navegadores (por ejemplo, su proyecto fue envuelto en un electrón y se convirtió en escritorio)? ¡Simplemente desinstale Autoprefixer! Con PostCSS, puede, como con el constructor, construir exactamente lo que su proyecto necesita.