Sass (SCSS)

¿Qué es Sass (SCSS)?

Sass es un preprocesador de CSS. Escribes las hojas de estilo en un lenguaje más capaz, y un paso de compilación las traduce a CSS plano que el navegador entiende. SCSS es la sintaxis más común para ello, y es un superconjunto de CSS, lo que significa que cualquier archivo CSS válido ya es SCSS válido. Lo adoptas sin reescribir lo que tienes.

Lo que Sass añade es la estructura que al CSS plano le faltó históricamente: variables para valores compartidos, anidamiento que refleja cómo se relacionan los elementos, mixins que empaquetan bloques de estilo reutilizables y funciones para cálculo. Un equipo que define la escala de espaciado y la paleta de color de una marca como variables puede reutilizarlas en todas partes, y luego cambiar una única definición para actualizar todo el sitio. El CSS nativo ha ganado desde entonces propiedades personalizadas y anidamiento, estrechando la brecha, pero Sass sigue haciendo más en tiempo de compilación y continúa siendo la columna vertebral de incontables bases de código en producción. Es menos un competidor del CSS que una capa que hace manejables las hojas de estilo grandes.

La contrapartida es el paso de compilación. Sass necesita compilarse, lo que añade herramientas, y abusar de funciones como el anidamiento profundo puede generar en silencio un CSS abultado. Usado con disciplina, mantiene coherente un sistema de diseño grande.

Sass (SCSS) en Dallonses

Cuando el estilado de un proyecto es lo bastante grande como para necesitar estructura real, Sass suele ser como se la damos. Variables, mixins y una organización de archivos sensata convierten una hoja de estilo dispersa en algo por lo que un equipo puede navegar, donde cambiar el color de acento de la marca es una sola edición en lugar de un buscar-y-reemplazar por toda la base de código.

Nos apoyamos en él sobre todo en el desarrollo de sistemas de diseño, donde la consistencia entre muchos componentes y páginas es justo de lo que se trata. Tokens compartidos definidos una vez y reutilizados en todas partes mantienen el producto visualmente coherente a medida que crece, y mantienen el estilado manejable para el equipo del cliente después de entregárselo. Usamos las funciones que se ganan su sitio y dejamos las que solo añaden ingenio, porque una hoja de estilo debe ser fácil de leer, no un acertijo.

¿Los estilos se desbordan más allá de lo que el CSS plano puede sostener? Démosles estructura.

Habla con nosotros sobre tus estilos