Tres mosqueteros del precompilador CSS y PostCSS

Este artículo contiene dos partes, la primera parte es un precompilador de CSS: Sass, Less, Stylus, la comparación entre ellos, y la segunda parte es el popular PostCSS.

¿Por qué existe un precompilador de CSS? Se trata de las deficiencias de CSS: sin variables (la nueva especificación ya es compatible), sin anidamiento, capacidad de programación débil y reutilización de código deficiente .
Estas deficiencias dan como resultado la poca capacidad de mantenimiento del CSS escrito, y contiene una gran cantidad de código repetitivo; para compensar estas deficiencias, se creó el precompilador de CSS. Cuando se trata de precompiladores de CSS, estos tres espadachines Sass, Less y Stylus son inseparables. En la historia, Sass fue el primero en aparecer en escena, porque apareció el primero, por lo que fue el más completo, con una variedad de funciones ricas; la aparición de Less acompañó la popularidad de Bootstrap, por lo que también ganó un gran número de usuarios; finalmente Stylus, desarrollado por TJ Great God (King Dashen), debido a su sintaxis concisa, es más como un lenguaje de programación, y es muy divertido de escribir. Así que hagamos una comparación simple a continuación.

Menos & SCSS ：
.wrap { display: block; }

Sass:
.wrap
display: block

Stylus:
.wrap
display block
Sass inicialmente controlaba la relación jerárquica a través de sangrías, espacios y saltos de línea. Los estudiantes que han escrito Python no estarán familiarizados con él. Más tarde, admitieron la sintaxis tradicional similar a CSS de Scss. Less es bastante satisfactorio y utiliza el estilo CSS, que es muy amigable para los principiantes y también es propicio para la migración de proyectos existentes. Stylus se puede escribir usando la sintaxis de estilo Sass y también es compatible con el estilo CSS.

Los tres apoyan la definición de variables, pero los métodos de definición son diferentes:

Menos:
@smallFont: 12px;
pequeño { tamaño de fuente: @smallFont; }

Sass:
$ smallFont: 12px;
small { tamaño de fuente: $ smallFont; }

Lápiz
óptico : smallFont = 12px
tamaño de
fuente pequeño smallFont

Cabe señalar que la variable declarada en Stylus, si el nombre de la variable es el mismo que el valor literal en CSS, sobrescribirá el valor literal en CSS.

Hay algo divertido: creo que todos suelen entrar en contacto con la biblioteca de componentes más o menos. El precompilador de CSS se utilizará para escribir el estilo en la preparación de la biblioteca de componentes, y el estilo personalizado puede ser proporcionado por pasando variables externas Función, al igual que Ant.design y ElementUI. Esto involucra el alcance de las variables CSS. Entre las tres precompilaciones, Sass / Stylus es el mismo y Less es otro caso. Veamos el ejemplo a continuación:

Menos:
@color: rojo;
.content-1 { color: @color; }

@de color negro;
.content-2 { color: @color; }

/ * El CSS compilado * /
.content-1 { color: black; }

.content-2 { color: black; } La variable en Less, cuando se usa en la declaración, si hay múltiples asignaciones, tomará el valor de la última asignación, que es la anterior .content-1, content- Los colores en 2 son todas razones negras. Con base en esta característica de la variable en Less, podemos cambiar fácilmente el valor de la variable en la biblioteca de componentes original o biblioteca de clases, y solo necesitamos asignar un valor a una variable específica después de importar el archivo Less. Al mismo tiempo, también traerá ciertos peligros ocultos: si diferentes bibliotecas de componentes o bibliotecas de clases usan el mismo nombre de variable, entonces habrá una situación de sobrescritura, por lo que se debe adoptar un enfoque modular.

Sass:
$ color: rojo;
.content-1 { color: $ color; }

$ color: negro;
.content-2 { color: $ color; }

Lápiz:
color = rojo;
.content-1
color color

color = negro;
.content-2
color color;

/ * El CSS compilado * /
.content-1 { color: red; }

.content-2 { color: black; } Como podemos ver arriba, si una variable en Sass / Stylus tiene múltiples asignaciones, tomará el valor de la asignación más reciente antes de la declaración, por lo que .content-1 El color de .content-2 es rojo y el color de .content-2 es negro. Al mismo tiempo, las variables en diferentes bibliotecas de componentes o bibliotecas de clases escritas por Sass / Stylus no entrarán en conflicto, pero esto plantea un desafío para personalizar el estilo anulando el valor de la variable. ¿Qué debemos hacer? El punto de prueba está aquí. Sass / Stylus proporciona una declaración de variable "asignar si no existe":

Sass:
$ a: 1;
$ a: 5! predeterminado;
$ b: 3! predeterminado;
// $ a = 1, $ b = 3

Lápiz óptico:
a = 1
a: = 5
b = 3
// a = 1, b = 3
Si observa el código con atención, definitivamente comprenderá: al usar la sintaxis "asignar si no existe", el compilador comprobar si una variable con el mismo nombre está definida antes, si no hay definición ejecutar la definición de variable, si la variable con el mismo nombre está definida antes no se ejecutará la operación de asignación. Por lo tanto, podemos definir variables en la biblioteca de componentes o biblioteca de clases que usa Sass / Stylus en la forma de "asignar si no existe", y definir la variable con el mismo nombre antes de importar, y luego podemos lograr el objetivo.

Al mismo tiempo, las variables que definimos no solo se pueden usar como valores declarados por CSS, sino que también se pueden anidar en selectores y atributos:

Menos:
@prefijo: ui;
@prop: fondo;
. @ {prefijo} -button { @ {prop} -color: rojo; }

Sass:
$ prefijo: ui
Error de análisis de KaTeX: Se esperaba 'EOF', obtuvo '#' en la posición 21: ... fondo; . # ̲ { prefijo} -button { # {$ prop} -color: rojo; }

Lápiz:
prefijo = ui
prop = background
. {
Prefix} -button {prop} -color red

El contenido relacionado con las variables está básicamente cubierto y el siguiente paso es la reutilización de estilos. Cuando se trata de reutilización de estilos, se deben mencionar la mezcla y la herencia. Para mixin, estos tres precompiladores también tienen diferentes implementaciones:

Menos:

.mixin-style (@color: rojo) { color: @color; }

.content { .mixin-style (rojo); }

Sass:
@mixin mixin-style { color: rojo; }

.content { @include mixin-style; }

Lápiz: color de color de
estilo mixin (color)

.content
mixin-style (red) // o mixin-styls red transparent mixin
en Less, puede introducir directamente una clase CSS como mixin (este método no es muy recomendable), y también proporcionar el mixin anterior que puede pasar parámetros ; Sass es bastante satisfactorio, y los mixins se definen e introducen a través de @mixin y @include; Stylus no requiere una declaración explícita de mixins, y también proporciona la función de mixins transparentes, que se introducen como atributos.

A continuación, hablaremos de herencia, entre ellos, Sass / Stylus hereda estilos a través de la palabra clave @extend, mientras que Less hereda a través de pseudoclases:

Sass / Stylus:

.message { padding: 10px ；border: 1px solid #eee ；}

.warning {@extend .message ；color: # e2e21e ；}

Menos:

.message { relleno: 10px; borde: 1px sólido #eee; }

.warning { &: extend (.message); color: # e2e21e; } Puedes juzgar los pros y los contras por ti mismo. Para una comparación más detallada, puede consultar el artículo de Gu Yiling.

Después de hablar sobre el preprocesador de CSS, hablemos del popular PostCSS. Cuando se trata de PostCSS, la gente siempre pregunta, ¿qué es PostCSS? Para esta pregunta, echemos un vistazo a su definición en el sitio web oficial:

PostCSS es una herramienta para transformar estilos con complementos JS. Estos complementos pueden filtrar su CSS, admitir variables y mixins, transpilar futura sintaxis CSS, imágenes en línea y más.
Por lo tanto, tengo entendido que PostCSS es una herramienta para transformar estilos con complementos JS. herramienta. El posicionamiento de PostCSS y el preprocesador de CSS es diferente. Después de leer el contenido anterior, todos saben cuál es la función del preprocesador de CSS. La función principal de PostCSS es lint css, que admite la sintaxis de CSS Next, agrega prefijos automáticamente, etc. Básicamente puede cubrir las funciones de los preprocesadores CSS, mientras que al mismo tiempo logra funciones que muchos preprocesadores no pueden. Dado que PostCSS es tan increíble, echemos un vistazo más de cerca.

Para PostCSS, hay algunos puntos que deben entenderse primero:

1. PostCSS no reemplaza al preprocesador CSS, aunque puede ser reemplazado por PostCSS. Para proyectos existentes, es fácil usar PostCSS, sin importar qué preprocesador o herramienta de compilación esté utilizando, no habrá demasiado costo de migración.
2. La ventaja de PostCSS radica en su rica ecología de complementos, que puede cubrir todos los aspectos del desarrollo, y podemos desarrollar fácilmente nuestros propios complementos. Al mismo tiempo, debido a que PostCSS usa Javascript, el propio Javascript y su próspera ecología le brindan a PostCSS capacidades más poderosas.
3. En PostCSS, el más conocido es Autoprefix, y Autoprefix se utiliza en una gran cantidad de preprocesos. Basándose en su diseño de arquitectura moderna, PostCSS se deshace de la carga de la historia y utiliza su sistema de complementos para fortalecer de manera más elegante la solidez de CSS

La arquitectura de PostCSS es aproximadamente la siguiente:

Convierta CSS a AST (Abstract Syntax Tree) a través de PostCSS, que corresponde a objetos JavaScript; luego recorra el AST a través de complementos, agregue, elimine y modifique; y finalmente genere archivos CSS. Este es el proceso completo, que es muy similar a la arquitectura de babel.

Entre ellos, CSS se analiza en AST y AST serializado para generar CSS. PostCSS lo ha hecho por nosotros. Solo debemos prestar atención al desarrollo de complementos y cómo operar AST.

Entonces, a continuación, usamos un ejemplo simple para ilustrar cómo desarrollar complementos PostCSS. Hay tal estilo:

.content { color: red; } Si detectamos una regla de estilo como "color: red" en un estilo determinado, necesitamos agregar una regla como "background-color: red" automáticamente.

PostCSS ofrece oficialmente plantillas escritas por complementos, simplemente descárguelas:

git clone [email protected]: postcss / postcss-plugin-boilerplate.git

Luego ingrese al directorio de la carpeta, ingrese el comando:

En
este momento, el inicio del nodo requerirá que ingrese alguna información, y luego generará automáticamente una carpeta de plantilla para el complemento, o ingresará a la carpeta correspondiente, en este momento puede ver el paquete familiar.json, index.js y otros archivos, después de instalar las dependencias usando npm, puede escribir la lógica del complemento en el archivo index.js. De manera similar, podemos instalar cualquier dependencia en el proyecto a través de npm, y luego importarlas a través de require en index.js, que es la ventaja de confiar en JavaScript.

El contenido predeterminado de index.js es este:

var postcss = require ('postcss');

module.exports = postcss.plugin ('postcss-practice', function (opts) { opts = opts || {};

// Work with options here

return function (root, result) {

    // Transform CSS AST here

};

});
El código del complemento escrito es así:

const postcss = require ('postcss');

const postcss = require ('postcss');

module.exports = postcss.plugin ('postcss-practice', function (opts) { opts = opts || {}; console.log (opts); // Trabaja con las opciones aquí

return function (root) {
    root.walkRules(rule => {
        console.log(rule.selector);
        rule.walkDecls(decl => {
            if (
                decl.prop === 'color' &&
                decl.value === 'red'
            ) {
                rule.append({
                    prop: 'background-color',
                    value: 'red'
                });
            }
        });
    });

};

});
Muy simple, explique: root.walkRules atravesará cada regla CSS, puede obtener el selector en cada conjunto de reglas a través de rule.selector, y luego atravesar las declaraciones de estilo en cada conjunto de reglas a través de rule.walkDecls, Through decl .prop, decl.value obtienen los atributos y valores en la declaración de estilo. Lo anterior juzga si el atributo es 'color de fondo' y el valor es 'rojo', y si se cumplen las condiciones, se inserta una nueva declaración de estilo en la regla (aquí para simplificar, no considera si un color de fondo la declaración ya existe).

Una vez que se escribe el complemento, index.test.js también se incluye en el proyecto de muestra para probar si el complemento es razonable. A continuación, se muestra el código de prueba en index.test.js:

var postcss = require ('postcss');

var plugin = require ('./ index.js');

function run (input, output, opts) { return postcss ([plugin (opts)]). process (input) .then (result => { esperar (result.css) .toEqual (output); esperar (resultado.warnings ( ) .length) .toBe (0); }); }

// Escribe las pruebas aquí

it ('hace algo', () => { return run ('a {color: red;}', 'a {color: red; background-color: red;}', {}); }); luego Ejecutar : El resultado de "npm run test":

Luego, puede empaquetarse y publicarse, y luego instalarse y usarse en el proyecto, al igual que otros complementos. PostCSS también proporciona muchas funciones útiles para ayudarlo a operar AST y completar fácilmente el desarrollo.