¿Qué es el Formateador CSS de ArrayKit?

Es un formateador css que funciona en el navegador y embellece o minifica CSS, SCSS y LESS con Prettier, y puede ordenar propiedades alfabéticamente y quitar declaraciones duplicadas en CSS puro.

¿Cómo minifico CSS con el Formateador CSS?

Pega tu hoja de estilo, elige el modo de sintaxis que coincida y selecciona Minificar para quitar comentarios y espacios y obtener CSS compacto para producción que puedes copiar o descargar.

¿El Formateador CSS admite SCSS y LESS?

Sí. Elige la sintaxis (CSS, SCSS o LESS) y la analizará en consecuencia. Ordenar propiedades y quitar duplicados se aplica al CSS puro.

¿El Formateador CSS puede ordenar propiedades alfabéticamente?

Sí. En modo embellecer con CSS seleccionado, activa Ordenar props para reordenar las declaraciones alfabéticamente dentro de cada regla.

¿Qué motor formatea el CSS?

El embellecido usa Prettier, así la salida coincide con las mismas convenciones que Prettier aplica en tu editor y herramientas de compilación.

¿El Formateador CSS sube mi CSS a algún lugar?

No. El formateador css se ejecuta por completo en tu navegador, así tus hojas de estilo se procesan localmente y nunca salen de tu dispositivo.

Formateador de CSS / SCSS

Embellece o minifica CSS/SCSS/LESS, ordena propiedades y quita duplicados.

Tu CSS se formatea localmente en tu navegador y nada se sube a un servidor.

¿También necesitas embellecer JavaScript? Prueba el Formateador JS.

Acerca de Formateador de CSS / SCSS

Este formateador css embellece o minifica CSS, SCSS y LESS usando Prettier, con opciones para ordenar las declaraciones alfabéticamente y quitar propiedades duplicadas. Úsalo como embellecedor css para limpiar hojas de estilo desordenadas, o como formateador scss y formateador less cuando trabajas con varios preprocesadores. Cambia al modo de minificar para quitar comentarios y espacios y obtener CSS compacto para producción. Está pensado para desarrolladores front-end, diseñadores e ingenieros de QA que necesitan estilos legibles y consistentes o una forma rápida de formatear css online antes de un commit o una revisión de código. Puedes elegir tabulaciones o espacios para la sangría, escoger la sintaxis que coincida con tu archivo y reutilizar la salida de prettier css donde quieras. Todo se procesa localmente en tu navegador, así tus hojas de estilo nunca salen de tu dispositivo y nada se sube a un servidor.

Características

Embellece o minifica CSS, SCSS y LESS usando Prettier
Elige el modo de sintaxis (CSS, SCSS o LESS) para un análisis preciso
Ordena propiedades alfabéticamente dentro de cada regla (CSS puro)
Quita declaraciones duplicadas del CSS puro
Elige tabulaciones o espacios para la sangría
El modo de minificar quita comentarios y espacios para producción
Reformatea reglas anidadas y media queries de forma consistente
Se ejecuta por completo en tu navegador

Cómo usar Formateador de CSS / SCSS

Pega tu CSS, SCSS o LESS en el cuadro de entrada.
Elige el modo de sintaxis (CSS, SCSS o LESS) que coincida con tu archivo.
Selecciona Embellecer para formatear o Minificar para compactar la salida.
Activa Ordenar props, Quitar duplicados o Tabs para ajustar el resultado.
Copia o descarga el CSS formateado desde el panel de salida.

Ejemplo

Entrada

.btn{color:#FFF;padding:8px;color:#fff;}

Salida

.btn {
  color: #fff;
  padding: 8px;
}

Modo embellecer con las declaraciones duplicadas eliminadas.

Errores comunes y solución de problemas

Ordenar o quitar duplicados de propiedades no surte efecto en SCSS o LESS. — Ordenar y quitar duplicados se aplica al CSS puro; cambia el modo de sintaxis a CSS si quieres que esas opciones funcionen.
Los botones Ordenar props y Quitar duplicados no aparecen en la barra de herramientas. — Esos botones solo aparecen en el modo embellecer con la sintaxis CSS seleccionada; desactiva Minificar y elige CSS para mostrarlos.
El CSS minificado es difícil de editar después. — Conserva tu archivo fuente original; la salida minificada está pensada para producción, no para seguir editándola.
La salida no se formatea porque está seleccionada la sintaxis incorrecta. — Haz coincidir el modo de sintaxis con tu código, por ejemplo elige SCSS para anidamiento y variables, así Prettier lo analiza correctamente.
La sangría no coincide con el estilo de tu proyecto. — Activa la opción Tabs para alternar entre tabulaciones y espacios antes de copiar.

Preguntas frecuentes

¿Qué es el Formateador CSS de ArrayKit?: Es un formateador css que funciona en el navegador y embellece o minifica CSS, SCSS y LESS con Prettier, y puede ordenar propiedades alfabéticamente y quitar declaraciones duplicadas en CSS puro.
¿Cómo minifico CSS con el Formateador CSS?: Pega tu hoja de estilo, elige el modo de sintaxis que coincida y selecciona Minificar para quitar comentarios y espacios y obtener CSS compacto para producción que puedes copiar o descargar.
¿El Formateador CSS admite SCSS y LESS?: Sí. Elige la sintaxis (CSS, SCSS o LESS) y la analizará en consecuencia. Ordenar propiedades y quitar duplicados se aplica al CSS puro.
¿El Formateador CSS puede ordenar propiedades alfabéticamente?: Sí. En modo embellecer con CSS seleccionado, activa Ordenar props para reordenar las declaraciones alfabéticamente dentro de cada regla.
¿Qué motor formatea el CSS?: El embellecido usa Prettier, así la salida coincide con las mismas convenciones que Prettier aplica en tu editor y herramientas de compilación.
¿El Formateador CSS sube mi CSS a algún lugar?: No. El formateador css se ejecuta por completo en tu navegador, así tus hojas de estilo se procesan localmente y nunca salen de tu dispositivo.

Herramientas relacionadas

Formateador de JS / TS — Embellece o minifica JavaScript, TypeScript y JSX/TSX con opciones de Prettier.
Formateador de HTML — Embellece o minifica HTML, formatea CSS/JS en línea y previsualiza el resultado.
Formateador de XML — Embellece, minifica y valida XML, y convierte XML ↔ JSON.
Formateador de SQL — Formatea SQL para MySQL, PostgreSQL, SQL Server, SQLite, BigQuery y Oracle.
Conversor de colores CSS — Convierte entre HEX, RGB y HSL con una muestra en vivo.
Verificador de contraste — Comprueba la relación de contraste WCAG y si pasa AA/AAA entre dos colores.
Optimizador de SVG — Minifica SVG: elimina comentarios, metadatos y restos del editor, y colapsa espacios.
Formateador de JSON — Embellece, minimiza y valida JSON con la ubicación de los errores.