FORMATADOR CSS / CSS · SCSS · MENOS

Formateador CSS

Expande una hoja de estilo de una línea en reglas ordenadas.

Se ejecuta localmente · el código no está cargado
Opciones

TU PRÓXIMO PASO

Conecte herramientas útiles con el flujo de trabajo de su empresa

cree una cuenta de empresa para configurar el monitoreo del sitio web, el correo electrónico comercial y las notificaciones, e invite a su equipo a trabajar en conjunto.

Las nuevas empresas reciben una prueba Pro de 14 días, sin necesidad de tarjeta. Las pruebas excluyen la concesión de crédito mensual pagado.

¿Ya tienes una cuenta? Abre tu espacio de trabajo → (English)

Cómo usarlo

  1. Pegar código, soltar un archivo o cargar la muestra; el idioma está preestablecido para esta página y se puede cambiar.
  2. Elija formato o minimice y ajuste la sangría, el ancho y otras opciones; el resultado aparece a la derecha a medida que escribe.
  3. Copiar o descargar el resultado; En caso de error, utilice "Ir al error", corríjalo y ejecútelo nuevamente.

Opciones de estilo de código

Convenciones comunes
OpcionesRecomendación
Sangría2 espacios (común en la interfaz) / 4 espacios / tabulación
ancho de líneaAjustar a 80; 100 o 120 para pantallas anchas
CotizacionesDoble (valor predeterminado más bonito) o sencillo
Punto y comaActivado de forma predeterminada para evitar sorpresas de ASI
Comas finalesAgregado en listas de varias líneas para diferencias más limpias

Idiomas y motores

El formato utiliza los mismos motores de código abierto que los editores populares, por lo que los resultados coinciden con Prettier en VS Code y su equipo puede mantener un estilo. Cada motor se carga desde este sitio y se ejecuta en su navegador.

Idioma
IdiomaFormatoComprimir
HTMLMás bonita 3✓ comentarios y espacios en blanco
XMLMotor XML XunL✓
CSS/SCSS/MenosMás bonita 3✓ Reestructuración de CSSO
JavaScript/MecanografiadoMás bonita 3(Babel)✓ Terser (solo JavaScript)
JSONMás bonita 3✓ los números grandes mantienen la precisión
YAMLMás bonita 3— (comentarios mantenidos)
SQLformateador sql (14 dialectos)—

Preguntas frecuentes

¿El formato cambiará los estilos?

No. Sólo cambian los espacios en blanco, los saltos de línea y el espaciado alrededor de los dos puntos y el punto y coma; Los selectores, las propiedades y los valores permanecen iguales.

¿Se cargó mi código?

No. Los motores se descargan desde este sitio y se ejecutan en su navegador; su código nunca pasa por nuestros servidores ni por ningún tercero, por lo que es seguro para el código interno y la configuración.

¿Qué tamaño pueden tener los archivos?

Hasta 5 MB por archivo; por encima de 300 KB, la página espera el botón en lugar de formatear mientras escribe, para que el navegador siga respondiendo.

Guía práctica del formateador CSS y preguntas comunes

¿Qué hace un formateador CSS?

El analizador PostCSS de Prettier 3 admite CSS, SCSS y Less: una declaración por línea, un selector por línea, reglas anidadas y @media con sangría por profundidad, colores y valores tal como están escritos.

¿Para quién es esto y cuándo es útil?

Desarrolladores front-end, personalizadores de temas y especialistas en marketing que editan estilos de sitios que necesitan leer una hoja de estilo de una línea o SCSS ordenado y menos.

¿Cómo uso este formateador CSS?

Pegue CSS, SCSS o Menos para obtener una declaración por línea con anidamiento claro y consultas de medios.

¿Cómo debo interpretar los resultados?

Solo diseño; La validez de la propiedad no se verifica y las llaves rotas o los puntos y coma faltantes se informan en la línea y la columna.

¿Dónde se realiza el trabajo y qué servicios reciben datos?

Las hojas de estilo se formatean en su navegador y nunca se cargan.