Formateador SCSS
Formatea e indenta código SCSS con una estructura limpia y legible en tu navegador.
Esta herramienta se ejecuta completamente en tu navegador. Tus archivos nunca se suben a un servidor.
$color:#3366ff;
.button {
color:$color;
&:hover {
opacity:.8;
}
}Qué hace este formateador
Reorganiza texto similar a SCSS con saltos tras llaves de apertura, llaves de cierre y puntos y coma, aplicando sangría de dos espacios en cada nivel anidado — incluidos el anidamiento de SCSS, los selectores padre tipo &:hover y los bloques @mixin/@include, que para este formateador son simplemente bloques delimitados por llaves.
Cómo usarlo
Pega SCSS en el editor y el resultado formateado se actualiza al instante. Copia la salida cuando esté lista o usa Reset para vaciar el editor; Reset no recupera el ejemplo inicial.
Comportamiento de formato
Fuera de cadenas entre comillas y comentarios, reduce secuencias de espacios y divide declaraciones tras los puntos y coma, igual para una regla CSS normal, un selector anidado o el cuerpo de un mixin. Conserva contenido citado, escapes, comentarios de bloque y comentarios de línea // reconocidos; la interpolación como #{$variable} pasa sin cambios porque son caracteres normales dentro de una declaración.
Límite importante del análisis
Es un formateador ligero basado en caracteres, no un compilador, analizador ni linter de SCSS — no compila Sass a CSS, no resuelve variables ni directivas @mixin/@include/@extend, no valida la profundidad de anidamiento ni detecta errores de sintaxis propios de Sass. Tampoco normaliza espacios alrededor de dos puntos, ordena propiedades ni expande abreviaturas.
Flujo de revisión seguro
Como el formateador solo reacciona a llaves, comillas y puntos y coma, construcciones inusuales — selectores & muy anidados, directivas de control como @if/@each, o interpolación sin comillas — pueden producir una sangría sorprendente. Revisa la salida y compílala con tu cadena de herramientas Sass habitual antes de usarla en producción.
Privacidad
El procesamiento se realiza localmente en tu navegador. La herramienta no sube el SCSS pegado.
Preguntas Frecuentes
- ¿Qué hace Formateador SCSS?
- Formatea e indenta código SCSS con una estructura limpia y legible en tu navegador.
- ¿Cambia esta herramienta SCSS el comportamiento?
- Solo cambia el diseño o espacios eliminables. Revisa la salida minificada si el código usa sintaxis inusual.
- ¿Se sube mi código?
- El procesamiento es local y tu código nunca se sube.