Convertidor de CSS a SCSS/Sass

¿Qué es esta herramienta?

Este convertidor en línea gratuito te ayuda a transformar instantáneamente tu CSS en SCSS o Sass con sangría. Es perfecto para desarrolladores que están haciendo la transición a hojas de estilo modernas y modulares con características como variables y anidamiento.

Cómo usar

1. Pega tu código CSS en el editor o sube un archivo.
2. Haz clic en Convertir para cambiar a SCSS o Sass.
3. Descarga, copia o comparte tu resultado convertido.

También puedes iniciar sesión con Google o GitHub para guardar y gestionar tu historial de conversiones.

¿Qué es CSS?

CSS (Hojas de Estilo en Cascada) es la base del diseño web. Controla la apariencia de los sitios web, definiendo el diseño, colores, fuentes, espaciado, animaciones y capacidad de respuesta.

Ejemplo de CSS:

p {
  color: red;
  text-align: center;
}
    

Aprende más en la Guía de CSS de W3Schools.

¿Qué es SCSS?

SCSS es una sintaxis compatible con CSS de Sass con poder añadido: variables, anidamiento, mixins y funciones. SCSS usa la extensión .scss y es ampliamente adoptado en proyectos frontend a gran escala.

Ejemplo de SCSS:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
    

¿Qué es Sass?

Sass (Hojas de Estilo Sintácticamente Asombrosas) es un preprocesador que extiende CSS con características avanzadas. Tiene dos sintaxis:

• SCSS: Similar a CSS con llaves y punto y coma
• Sass: Basado en sangría, sin llaves ni punto y coma

Sass ayuda a los desarrolladores a escribir hojas de estilo DRY, mantenibles y escalables para proyectos complejos.

Ejemplo de Sass (con sangría):

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none
    

¿Por qué convertir CSS a SCSS/Sass?

• Estructura de código limpia y organizada
• Componentes reutilizables con mixins y variables
• Mantenimiento y refactorización más fáciles

Explora Sass y SCSS en detalle en la documentación oficial de Sass.