Optimizacion CSS
Variables Refactor analiza tu CSS y extrae valores repetidos como colores, tamanos y espaciados en variables CSS reutilizables dentro de :root. Esto crea un sistema centralizado de tokens de diseno que facilita el mantenimiento y la actualizacion de bases de codigo grandes.
Cambia entre CSS Minifier y Variables Refactor en un mismo espacio para tareas de rendimiento y mantenibilidad.
Optimiza archivos CSS, SCSS, SASS, LESS y similares a Stylus con modos de compresion seguro, equilibrado o maximo.
Detecta valores repetidos y conviertelos en variables CSS reutilizables para construir hojas de estilo mas limpias basadas en tokens.
Copia o descarga el CSS refactorizado al instante, o exporta lotes minificados como ZIP para pipelines de despliegue.
Todas las transformaciones se ejecutan en tu navegador para mantener privados los estilos fuente durante la optimizacion.
El plan gratis incluye 10 archivos de estilos al dia. PRO y PREMIUM obtienen optimizaciones diarias ilimitadas.
Variables Refactor analiza tu CSS y extrae valores repetidos como colores, tamanos y espaciados en variables CSS reutilizables dentro de :root. Esto crea un sistema centralizado de tokens de diseno que facilita el mantenimiento y la actualizacion de bases de codigo grandes.
Define el umbral minimo de repeticiones (2+, 3+, 4+ o 5+) para controlar que valores se convierten en variables. Los umbrales bajos crean mas variables para maximizar la reutilizacion; los altos se centran en los valores mas repetidos.
Carga archivos o pega CSS directamente, ejecuta el refactor y obten una hoja de estilo completa con variables :root arriba y todos los valores repetidos sustituidos por referencias var(). Copia o descarga el resultado para usarlo de inmediato en tu proyecto.
Esto es especialmente util en proyectos legacy donde los colores y espaciados estan hardcodeados en muchos selectores. Convertir los valores repetidos en tokens reduce el coste de cambio y baja el riesgo de inconsistencias visuales.
Tras extraer variables, los equipos pueden estandarizar nombres, mapear tokens a sistemas de diseno y mantener una arquitectura mas limpia para temas y futuras escalas de componentes.
CSS Minifier se centra en reducir el tamano de los archivos para una entrega mas rapida. Variables Refactor se centra en la estructura del codigo extrayendo valores repetidos en variables reutilizables de :root.
No. La herramienta solo sustituye valores repetidos de declaraciones por referencias var(--token) y mantiene intactos los selectores y nombres de propiedades.
Si. En la pestana Variables Refactor puedes elegir el umbral minimo de repeticiones para que solo los valores frecuentes se conviertan en variables CSS.
Si. Usa la minificacion para reducir el peso y el refactor a variables para mejorar la mantenibilidad; despues exporta el codigo para tu pipeline de compilacion o despliegue directo.