Red de conocimiento informático - Conocimiento sistemático - Una breve discusión sobre los preprocesadores CSS (1): ¿Por qué utilizar preprocesadores?

Una breve discusión sobre los preprocesadores CSS (1): ¿Por qué utilizar preprocesadores?

Antecedentes

Desde el nacimiento de CSS, la sintaxis básica y el mecanismo central no han cambiado esencialmente. Su desarrollo es casi por completo una mejora en la expresividad. Al principio, el papel de CSS en las páginas web era solo una decoración auxiliar y la facilidad de aprendizaje era el mayor requisito; sin embargo, la complejidad de los sitios web ya no es la misma y el CSS nativo ha abrumado a los desarrolladores;

Cuando un idioma tiene capacidades insuficientes y el entorno operativo del usuario no admite otras opciones, el idioma se convertirá en un idioma de "objetivo de compilación". Los desarrolladores elegirán otro lenguaje de nivel superior para desarrollar y luego compilarán en el lenguaje de nivel inferior para ejecutarlo.

Como resultado, en el campo del front-end, grandes responsabilidades vinieron del cielo y surgió el preprocesador CSS. El antiguo lenguaje CSS se ha “readaptado” de otra manera a las necesidades del desarrollo web.

Los "superpoderes" que nos otorga el preprocesador

Para repasar brevemente, el preprocesador CSS nos ha brindado varias capacidades importantes, que se enumeran a continuación de superficial a profunda. (No importa cuánto lo uses, no importa qué tan profundo sea, te beneficiarás).

División de archivos

Las páginas son cada vez más complejas y los archivos CSS que deben cargarse son cada vez más grandes, necesitamos dividir archivos grandes, de lo contrario será difícil de mantener. Las soluciones tradicionales de división de archivos CSS son básicamente directivas @import nativas de CSS o la carga de varios archivos CSS en HTML. Estas soluciones generalmente no pueden cumplir con los requisitos de rendimiento.

El preprocesador CSS amplía las capacidades de la directiva @import y vuelve a fusionar los archivos divididos en un archivo grande a través del proceso de compilación. Por un lado, esto resuelve el problema del mantenimiento inconveniente de archivos grandes y, por otro lado, también resuelve el problema de rendimiento al cargar un montón de archivos pequeños.

Modularización

Llevar la idea de segmentación de archivos un paso más allá es la "modularización". Después de dividir razonablemente un archivo CSS grande, la relación entre los archivos pequeños resultantes debe ser una estructura de árbol.

El nodo raíz del árbol generalmente se denomina "archivo de entrada" y los otros nodos del árbol generalmente se denominan "archivos de módulo". Los archivos de entrada generalmente dependen de múltiples archivos de módulo, y cada archivo de módulo también puede depender de otros módulos terminales, formando así el árbol completo.

Aquí tienes un ejemplo sencillo:

entry.styl

├─ base.styl

│ ├─ normalize.styl

p>

│ └─ reset.styl

├─ diseño.styl

│ ├─ header.styl

│ │ └─ estilo de navegación.

│ └─ footer.styl

├─ sección-foo.styl

├─ sección-bar.styl

└ ─ ...(El archivo de entrada Entry.styl importará los módulos necesarios durante la compilación, generará Entry.css y luego la página hará referencia a él).

Si ha utilizado otros lenguajes de programación que tienen un mecanismo de módulo. Ya debería tener un conocimiento profundo de que la modularización es una muy buena forma de organizar el código y un medio importante para que los desarrolladores diseñen la estructura del código. Los módulos pueden implementar claramente la gestión de dependencias, reutilización y capas de código, lo que permite que el proceso de desarrollo de CSS disfrute de la comodidad del desarrollo de programas moderno.

Anidamiento de selectores

El anidamiento de selectores es un método de organización de código dentro de un archivo, que permite que una serie de reglas relacionadas presenten una relación jerárquica.

En el pasado, si queríamos lograr este objetivo, solo podíamos escribir así:

.nav {margin: auto /* Horizontalmente centrado*/; /p>

.nav li {float: left /* disposición horizontal*/; ancho: 100px;}

.nav li a {display: text-decoration: none;}Este escrito El método requiere que lo hagamos manualmente. Mantenga la relación de sangría. Cuando cambia el selector de nivel superior, todos los selectores de nivel inferior relacionados deben modificarse. Además, no es fácil leer cada regla en una línea y también es incómodo. para escribir comentarios para una sola declaración (solo se puede insertar entre las declaraciones).

En el lenguaje de preprocesamiento CSS, la sintaxis anidada puede expresar fácilmente la relación jerárquica entre reglas, y escribir comentarios para una única declaración también es claro y fácil de leer:

.nav

. p>

margen: auto // centrado horizontalmente

ancho: 1000px

color: #333

li

flotador: izquierda // Disposición horizontal

ancho: 100px

a

pantalla: bloque

decoración de texto: ninguna variable

p>

Antes de que ocurra un cambio, todos los valores de propiedad en CSS son "números mágicos". No sabes de dónde viene este valor ni cuál es su significado. Una vez que tengamos variables, podemos darles nombres a estos "números mágicos" para facilitar la memoria, la lectura y la comprensión.

A continuación encontraremos que cuando se usa un valor específico en varios lugares, las variables son un método de abstracción simple y efectivo que puede eliminar dicha duplicación y hacer que su código sea más SECO.

Comparemos los siguientes dos fragmentos de código:

/* Código CSS nativo*/

fuerte {

color: #ff4466 ;

font-weight: negrita;

}

/* ... */

.notice {

color: #ff4466;

}// Usa Stylus para escribir

$color-primary = #ff4466

strong

color: $color-primario

peso de fuente: negrita

/* ... */

.notice

color : $color-primary Como te habrás dado cuenta, las variables facilitan a los desarrolladores unificar el estilo visual del sitio web y también facilitan requisitos como el "cambio de apariencia".

Operación

No basta con tener variables, también necesitamos operaciones. Si las variables hacen que los valores sean significativos, las operaciones pueden asociar valores con valores. Los valores de algunos atributos en realidad están estrechamente relacionados con los valores de otros atributos. La sintaxis CSS no puede expresar esta relación en el lenguaje de preprocesamiento, podemos usar variables y expresiones para presentar esta relación;

Por ejemplo, necesitamos hacer que un contenedor muestre solo tres líneas de texto como máximo. En el pasado, normalmente lo escribíamos así:

.wrapper {

.

desbordamiento -y: oculto;

altura de línea: 1,5;

altura máxima: 4,5 em /* = 1,5 x 3 */

}Puedes Se descubre que solo podemos usar comentarios para expresar de dónde proviene el valor de altura máxima, y ​​valores como 3 en los comentarios también son números mágicos y requieren más explicaciones.

En el futuro, cuando cambie la altura de la fila o el número de filas, el valor de altura máxima y el cálculo en el comentario también deberán actualizarse simultáneamente, lo cual es muy inconveniente de mantener.

A continuación utilizamos el lenguaje de preprocesamiento para mejorarlo:

.wrapper

$max-lines = 3

$line- height = 1,5

desbordamiento-y: oculto

altura-línea: $altura-línea

altura-máxima: unidad($altura-línea * $max - líneas, 'em') A primera vista, el número de líneas de código parece haber aumentado, pero la intención del código es más clara: deja todo claro sin ningún comentario. Durante el mantenimiento posterior, sólo necesitará modificar esas dos variables.

Cabe mencionar que esta forma de escribir también trae otro beneficio. La variable $line-height puede ser una variable local definida por el propio .wrapper (como el código anterior), o puede obtenerse desde un ámbito de nivel superior:

$line-height = 1.5 / / Unificación global Altura-línea

cuerpo

altura-línea: $altura-línea

.wrapper

$max-lines = 3

max-height: unit($line-height * $max-lines, 'em')

overflow-y: oculto Esto significa que .wrapper puede heredar la altura de línea de antepasados ​​sin Debe escribir la altura de su fila para cumplir con este requisito de "mostrar solo tres filas". Con las operaciones, tenemos la capacidad de expresar la relación entre atributos, lo que hace que nuestro código sea más flexible y SECO.

Función

Al abstraer operaciones comunes, obtenemos funciones.

Los desarrolladores pueden personalizar funciones y el preprocesador en sí tiene una gran cantidad de funciones integradas. ¡La función integrada más utilizada es probablemente la función de operación de color! Con ellos, ni siquiera necesitamos abrir Photoshop para ajustar los colores y obtener la misma variante de color de un determinado color.

Por ejemplo, queremos agregar un efecto de desplazamiento del mouse a un botón, y el efecto de desplazamiento más simple es oscurecer el botón. El código CSS que escribimos puede verse así:

.button {

background-color: #ff4466;

}

. button:hover {

background-color: #f57900;

} Creo que incluso a los diseñadores visuales más experimentados les resultaría difícil distinguir entre #ff4466 y #f57900 ¿Qué es exactamente? la conexión entre colores. Y si nuestro código está escrito en un lenguaje de preprocesamiento, entonces las cosas serán mucho más intuitivas:

.button

$color = #ff9833

fondo -color : $color

&:hover

background-color: darken($color, 20%) Además, las funciones del preprocesador a menudo admiten parámetros predeterminados y argumentos con nombre, objetos de argumentos y otros. Con funciones avanzadas, las ramas condicionales también se pueden configurar internamente para cumplir con requisitos lógicos complejos.

Mixin

Mixin es otra característica útil proporcionada por el preprocesador CSS. La forma y el uso de Mixin son muy similares a las funciones: primero defínalas, luego llámalas cuando sea necesario y puedes aceptar parámetros al llamar. La diferencia entre esta y una función es que una función se usa para generar un valor, mientras que un mixin se usa para generar un fragmento de código CSS.

Mixin puede generar múltiples reglas CSS o solo algunas declaraciones CSS.

En términos generales, Mixin puede abstraer bloques de código similares en archivos CSS y darles un nombre intuitivo. Por ejemplo, el marco CSS puede empaquetar algunos fragmentos de código de uso común como mixins para respaldo, que pueden llamarse internamente a pedido o exponerse a los usuarios para que los llamen en la capa empresarial.

Por ejemplo, a menudo usamos clearfix para cerrar flotantes. En CSS nativo, si desea evitar la duplicación del código clearfix, a menudo solo puede definir primero una clase .clearfix y luego montarla en los elementos requeridos en HTML:

/* Definir una clase para clearfix */

.clearfix {...}

.clearfix::after {...}

...

...

...
¿No es desagradable exponer la implementación de la capa de presentación a la capa de estructura? En el preprocesador, también podemos elegir otra forma de reutilización:

// Definir un mixin para clearfix

clearfix()

.. .

&::after

...

// Llame a

.info

en el elemento requerido

clearfix( )

pie de página

ingeniería clearfix()

El lenguaje de preprocesamiento CSS no puede ejecutarse directamente en el entorno del navegador, lo que significa que escribimos El código fuente debe compilarse en código CSS antes de que pueda usarse en páginas web. Este parece ser un umbral que nos obliga a pagar un coste "extra".

Pero en el entorno actual, el proceso de desarrollo front-end de la mayoría de los proyectos ya incluye el enlace de construcción. Por ejemplo, elegir cualquier solución de modularización de script requiere un proceso de empaquetado durante la implementación. Entonces, para la mayoría de los equipos, este umbral en realidad se ha cruzado en más de la mitad.

Una vez aceptemos esta configuración, también podremos disfrutar de beneficios "adicionales". Mientras agrega el enlace de compilación al desarrollo de CSS, también puede agregar otros enlaces de construcción, como verificación de código, compresión de código, posprocesamiento de código, etc.

El “postprocesamiento de código” se refiere a las funciones proporcionadas por varios complementos en la plataforma PostCSS por sí solas que valen el precio de la entrada. Ya no necesitamos agregar manualmente prefijos del navegador al código CSS. ¡Podemos usar directamente el método de escritura estándar y dejar que la herramienta se encargue del resto!

Para obtener más información sobre el preprocesador CSS (1): ¿Por qué utilizar el preprocesador? Preste atención al sitio web chino de PHP para obtener artículos relacionados.