Directorio de artículos
preprocesador css
definición
En términos generales, un preprocesador dirigido a CSS es un preprocesador de CSS. Este artículo se refiere principalmente al lenguaje específico de dominio con el objetivo de generar finalmente CSS. Ejemplo: Sass Less Stylus
ejemplo
Tomemos menos como ejemplo
.opacity(@opacity: 100) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}
.sidebar {
.opacity(50);
}
Convertirlo al entorno de producción css es
.sidebar {
opacity: 0.5;
filter: alpha(opacity=50);
}
Comparando Shangxia, encontrará que los códigos de Shangxia y Shangxia son idiomas completamente diferentes antes y después de la compilación.
Principio de realización
- Obtenga el árbol de análisis del código fuente de dsl
- Convierte un árbol de análisis con nodos relacionados generados dinámicamente en un árbol de análisis estático
- convertir árbol de análisis estático a árbol de análisis estático css
- Conversión de árboles de análisis estático CSS en código CSS
Por supuesto, en realidad, el preprocesador CSS es un poco más complicado.
Ventajas y desventajas
Ventajas: procesamiento lógico a nivel de lenguaje, características dinámicas, estructura de proyecto mejorada
Desventajas: sintaxis especial, alto acoplamiento de marco y alta complejidad
postprocesador css
definición
Procese css y finalmente genere un preprocesador para css.
Pertenece al preprocesador CSS en un sentido amplio.
Ejemplo: autoprefijador clean-css
ejemplo
Toma por Autoprefixerejemplo
.container {
display: flex;
}
.item {
flex: 1
}
Convertir a entorno de producción css
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.item {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
Como puede ver, tanto los códigos precompilados como los compilados son CSS
Principio de realización
- Analice el código fuente como css, obtenga un árbol de análisis
- Posprocesamiento del árbol de análisis de css
- Convierta el árbol de análisis css en código css
Ventajas y desventajas
Ventajas: al usar la sintaxis CSS, es fácil de modularizar y pegar en el futuro estándar de CSS.
Desventajas: el procesamiento lógico es limitado.
Cambios en el modo de desarrollo css
Originalmente: código fuente de dsl a css de entorno de producción
Ahora: código fuente de dsl a css estándar a css de entorno de producción