Formateador SCSS

Qué hace este formateador SCSS

SCSS te permite anidar reglas, guardar valores en $variables, reutilizar bloques con @mixin y mantener ajustes en mapas. Esa potencia hace que los archivos crezcan rápido, y cuando varias personas editan la misma hoja de estilos, la sangría se descontrola. Una persona escribe color:$brand, otra escribe color : $brand ;, y los bloques anidados acaban a profundidades al azar.

Esta herramienta vuelve a formatear el SCSS para que cada nivel de anidamiento tenga la misma sangría, cada declaración vaya en su propia línea y los espacios alrededor de los dos puntos y las llaves sean uniformes. Usa Prettier 3 con su analizador de SCSS, y funciona por completo en tu navegador.

Cómo usarlo

1. Pega tu SCSS en el cuadro de la izquierda. Se formatea en el momento en que lo pegas.
2. También puedes pulsar Abrir archivo para cargar un archivo .scss, o Ejemplo para ver una muestra.
3. Elige la Sangría: 2 espacios, 4 espacios o tabulaciones.
4. Elige el Ancho de línea. Las listas largas de selectores, los mapas y los argumentos de @include se parten al superar ese ancho.
5. Activa Comillas simples si tu guía de estilo las prefiere.
6. Pulsa Formatear, o Ctrl+Intro en la entrada.
7. Pulsa Copiar, o Descargar para guardar un archivo .scss.

Después del primer formateo, el resultado sigue tus cambios mientras escribes. Si algo está mal, aparece un mensaje como Línea 2, columna 3: Unclosed block bajo los cuadros, y Mostrar en la entrada pone el cursor en ese punto.

Antes y después

Un fragmento de SCSS comprimido con una variable, un mixin y reglas anidadas:

$brand:#3b82f6;@mixin card($pad:16px){padding:$pad;border-radius:8px}.nav{display:flex;gap:1rem;a{color:$brand;&:hover{text-decoration:underline}}.btn{@include card(12px)}}

Después de Formatear con 2 espacios:

$brand: #3b82f6;
@mixin card($pad: 16px) {
  padding: $pad;
  border-radius: 8px;
}
.nav {
  display: flex;
  gap: 1rem;
  a {
    color: $brand;
    &:hover {
      text-decoration: underline;
    }
  }
  .btn {
    @include card(12px);
  }
}

Cada nivel de anidamiento añade una sangría, así que se ve de un vistazo que &:hover pertenece al enlace que está dentro de .nav.

Los mapas de Sass se reparten en varias líneas, una clave por línea:

$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px
);

Con Comillas simples activado, @use "sass:math"; pasa a @use 'sass:math';. Los comentarios de línea se quedan exactamente donde estaban:

// Header styles
.header {
  .logo {
    width: 120px;
  }
}

Errores y límites

El formateador tiene que analizar tu archivo antes de poder escribirlo. Una llave de cierre que falta es el problema más común. Con esta entrada:

.nav {
  a { color: red;

el mensaje es Línea 2, columna 3: Unclosed block, que señala el a { que nunca se cerró.

Algunas cosas que conviene saber:

• La herramienta comprueba la sintaxis, no el significado. Una variable sin definir o un mixin que no existe no se notifican. Eso lo detecta el compilador de Sass.
• No reordena propiedades ni ordena selectores. Se mantiene tu orden.
• La sintaxis con sangría .sass no es compatible. Conviértela antes a SCSS o formatéala en un editor que la admita.
• En esta página no hay Minificar. Minificar SCSS no tiene sentido porque los navegadores solo ejecutan CSS. Compila con Sass y después minifica el CSS resultante.

Consejos para un SCSS más limpio

• Mantén el anidamiento poco profundo. Tres niveles es un límite habitual en las guías de estilo, porque el anidamiento profundo crea selectores largos y frágiles.
• Pon las variables y los mapas en un parcial aparte, como _tokens.scss, y cárgalo con @use.
• Formatea antes de hacer commit. Si no, los pequeños cambios de espacios acaban mezclados con los cambios reales en la revisión de código.
• Si trabajas con el CSS ya compilado, el formateador CSS también puede minificarlo.

Otras formas de formatear SCSS

• VS Code: instala la extensión de Prettier, abre el archivo y ejecuta Dar formato al documento (Mayús+Alt+F en Windows, Mayús+Option+F en macOS).
• Línea de comandos: npx prettier --write "src/**/*.scss" formatea todos los archivos SCSS de una carpeta.
• IDE de JetBrains como WebStorm tienen una acción integrada Reformat Code, y pueden usar Prettier si está instalado en el proyecto.

Esta página no necesita configuración y mantiene tu código en tu dispositivo, así que es una opción rápida para un fragmento que viene de un ticket, de un CodePen o del mensaje de un compañero. Para el marcado que usa estos estilos, prueba el formateador HTML, y para los scripts, el formateador JavaScript.