Herramientas CSS

Caja de herramientas CSS todo en uno: formatear y embellecer, minificar y compactar, validar la sintaxis, compilar SCSS/Sass y LESS a CSS, e invertir CSS de nuevo a SCSS o LESS.
Todo el procesamiento se realiza localmente en su navegador: sus datos nunca se suben a ningún servidor.
Modo:
CSS / SCSS / LESS / SASS de entrada
Salida
Cómo se usa: pegue su CSS/SCSS/LESS/SASS en el área de texto izquierda, elija un modo y haga clic en Procesar (o simplemente escriba: se procesa automáticamente al introducir texto).
Cómo funciona cada modo
Formato CSS: formatea CSS con una sangría coherente (2/4 espacios o tabuladores), una propiedad por línea. Gestiona reglas arroba anidadas como @media, @keyframes y @supports. Conserva los comentarios (tanto /* */ como los de una línea). Cambie el selector Sangría para alternar entre 2 espacios, 4 espacios o tabuladores.
Minificar: elimina todo el espacio en blanco, los comentarios y los caracteres redundantes innecesarios para obtener el CSS más compacto. Ideal para el despliegue en producción, para reducir el tamaño del archivo y el ancho de banda. Consulte la barra de estadísticas para ver la razón de compresión.
Validar: analiza el CSS y comprueba si hay errores de sintaxis. Informa de los errores de análisis con el número exacto de línea y de columna. Muestra también estadísticas: número de reglas, selectores, declaraciones y reglas arroba.
Formato SCSS: reformatea hojas de estilo SCSS/Sass con una sangría coherente. Gestiona toda la sintaxis propia de SCSS: $variables, @mixin/@include, @extend, el flujo de control @if/@for/@each, la interpolación #{$var} y los comentarios de una línea //. Conserva la estructura de selectores anidados y sangra correctamente los bloques anidados. Cambie el selector Sangría para alternar entre 2 espacios, 4 espacios o tabuladores.
Formato LESS: reformatea hojas de estilo LESS con una sangría coherente. Gestiona toda la sintaxis propia de LESS: @variables, mixins paramétricos, guardas (when), la interpolación @{var}, la fusión y los comentarios de una línea //. Conserva la estructura de selectores anidados y sangra correctamente los bloques anidados. Cambie el selector Sangría para alternar entre 2 espacios, 4 espacios o tabuladores.
SCSS → CSS: compila hojas de estilo SCSS/Sass a CSS plano con el compilador oficial Dart Sass (v1.102). Admite variables ($var), anidamiento, mixins (@mixin, @include), funciones, @extend, el flujo de control @if/@for/@each y los módulos modernos de Sass (@use, @forward). El compilador Sass (~5,4 MB) se carga de forma diferida la primera vez que usa este modo.
LESS → CSS: compila hojas de estilo LESS a CSS plano. Admite variables (@var), anidamiento, mixins, mixins paramétricos, operaciones, funciones, guardas e importación (@import). El compilador (~150 KB) se carga de forma diferida la primera vez que usa este modo.
SASS → CSS: compila la sintaxis SASS con sangría (archivos .sass, sin llaves ni puntos y coma) a CSS plano con Dart Sass. La sintaxis SASS con sangría usa el espacio en blanco significativo en lugar de llaves, lo que la hace más concisa. El mismo compilador Dart Sass (~5,4 MB) gestiona la sintaxis SCSS y la SASS con sangría.
CSS → SCSS: convierte CSS estándar a sintaxis SCSS con una refactorización automática del anidamiento. Detecta patrones tipo BEM y mueve los selectores .padre-hijo a bloques anidados &-hijo. Convierte los selectores descendientes en reglas anidadas, los selectores de pseudoclase en &:estado y extrae las propiedades personalizadas de CSS repetidas a $variables de SCSS. Si su CSS tiene una estructura plana y repetitiva, esta herramienta le ayudará a refactorizarla en un SCSS anidado más limpio.
CSS → LESS: convierte CSS estándar a sintaxis LESS con una refactorización automática del anidamiento. El mismo tipo de anidamiento que CSS→SCSS: detecta patrones padre repetidos, selectores descendientes y pseudoclases. Extrae las propiedades personalizadas de CSS repetidas a @variables de LESS. La salida es código LESS anidado y limpio.
Cascada, especificidad y por qué los estilos se pelean

Cuando varias reglas apuntan al mismo elemento, la especificidad decide al ganador: los estilos en línea vencen a los id, los id vencen a las clases, las clases vencen a los selectores de elemento, y el orden de origen rompe los empates. La marca !important anula este cálculo, y hace que la siguiente anulación sea todavía más difícil.

La especificidad se puntúa por selector, no se suma a partir del contexto: una regla más específica gana independientemente del lugar de la hoja de estilo en que aparezca.