Sass (lenguaje de hojas de estilo)

Sass (abreviatura de syntaclyticly awesome style sheets ) es un lenguaje de scripting de preprocesador que se interpreta o compila en hojas de estilo en cascada (CSS). SassScript es el lenguaje de scripting propiamente dicho.

Sass consta de dos sintaxis . La sintaxis original, llamada "sintaxis con sangría", utiliza una sintaxis similar a la de Haml . ^{[ 2 ] [ 3 ]} Utiliza la sangría para separar bloques de código y los saltos de línea para separar reglas. La sintaxis más reciente, SCSS (Sassy CSS), utiliza un formato de bloques similar al de CSS. Utiliza llaves para denotar bloques de código y punto y coma para separar reglas dentro de un bloque. Los archivos de sintaxis con sangría y SCSS tradicionalmente reciben las extensiones .sass y .scss, respectivamente. ^{[ 4 ]}

CSS3 consta de una serie de selectores y pseudoselectores que agrupan reglas que les son aplicables. Sass (en el contexto más amplio de ambas sintaxis) extiende CSS al proporcionar varios mecanismos disponibles en lenguajes de programación más tradicionales , particularmente lenguajes orientados a objetos , pero que no están disponibles en CSS3. Cuando se interpreta SassScript, crea bloques de reglas CSS para varios selectores según lo definido por el archivo Sass. El intérprete de Sass traduce SassScript a CSS. Alternativamente, Sass puede monitorear el archivo .sass o .scss y traducirlo a un archivo .css de salida cada vez que se guarda el archivo .sass o .scss. ^{[ 5 ]}

La sintaxis con sangría es un metalenguaje. SCSS es un metalenguaje anidado y un superconjunto de CSS, ya que un CSS válido es un SCSS válido con la misma semántica .

SassScript proporciona los siguientes mecanismos: variables , anidamiento , mixins , ^{[ 3 ]} y herencia de selectores . ^{[ 2 ]}

Sass fue diseñado inicialmente por Hampton Catlin y desarrollado por Natalie Weizenbaum. ^{[ 6 ] [ 7 ]}

SassScript se implementó en varios lenguajes; las implementaciones más destacadas son:

• La implementación oficial de código abierto de Dart . ^{[ 8 ]}
• El módulo oficial "sass" de Node.js en npm , que es Dart Sass compilado a JavaScript puro. ^{[ 9 ]}
• El módulo oficial de Node.js "sass-embedded" es un envoltorio de JavaScript alrededor del ejecutable nativo de Dart. ^{[ 10 ]}
• La implementación original de Ruby de código abierto creada en 2006, ^{[ 8 ]} desde entonces está obsoleta debido a la falta de mantenedores y alcanzó el fin de su vida útil en marzo de 2019. ^{[ 11 ] [ 12 ]}
• libSass, la implementación oficial de código abierto de C++ , (obsoleta en octubre de 2020 ^{[ 13 ]} y luego alcanzó) el fin de su ciclo de vida en octubre de 2025. ^{[ 14 ]}
• El módulo de Node "node-sass" en npm (obsoleto en ese momento) que finalizó su vida útil en julio de 2024 ^{[ 15 ]} , basado en libSass, que ya había finalizado su vida útil ^{[ 16 ] .}
• JSass, una implementación no oficial de Java , ^{[ 17 ]} basada en libSass, que ya no tiene soporte. ^{[ 18 ]}
• phamlp, una implementación no oficial de Sass/SCSS en PHP . ^{[ 8 ]}
• Vaadin tiene una implementación de Sass en Java. ^{[ 19 ]}
• Firebug , una extensión XUL ("heredada") de Firefox para el desarrollo web. ^{[ 20 ]} Posteriormente fue declarada obsoleta y luego descontinuada en favor de las herramientas para desarrolladores integradas en el propio Firefox. Dejó de funcionar cuando Firefox 57 dejó de ser compatible con las extensiones XUL.

En la Conferencia de Desarrolladores HTML5 de 2012, Hampton Catlin, el creador de Sass, anunció la versión 1.0 de libSass, una implementación de código abierto en C++ de Sass desarrollada por Catlin, Aaron Leung y el equipo de ingeniería de Moovweb . ^{[ 22 ] [ 23 ]}

Según Catlin, libSass se puede "insertar en cualquier cosa y tendrá Sass... Podrías insertarlo directamente en Firefox hoy mismo y compilarlo allí. Escribimos nuestro propio analizador sintáctico desde cero para asegurarnos de que eso fuera posible". ^{[ 24 ]}

Los objetivos de diseño de libSass son:

• Rendimiento  : los desarrolladores han informado de aumentos de velocidad de 10 veces con respecto a la implementación de Sass en Ruby. ^{[ 25 ]}
• Integración más sencilla  : libSass facilita la integración de Sass en más software. Antes de libSass, integrar Sass de forma precisa en un lenguaje o producto de software requería incluir todo el intérprete de Ruby. En cambio, libSass es una biblioteca enlazable estáticamente, sin dependencias externas y con una interfaz similar a la de C, lo que facilita la integración directa de Sass en otros lenguajes y herramientas de programación. Por ejemplo, ahora existen enlaces de código abierto para libSass en Node , Go y Ruby . ^{[ 23 ]}
• Compatibilidad  : el objetivo de libSass es la compatibilidad total con la implementación oficial de Sass en Ruby. Este objetivo se ha logrado en libsass 3.3. ^{[ 26 ]}

• Menos (lenguaje de hoja de estilo)
• Stylus (lenguaje de hojas de estilo)

• Ndia, John Gichuki; Muketha, Geoffrey Muchiri; Omieno, Kelvin Kabeti (2019). "Métricas de complejidad para hojas de estilo en cascada Sassy" (PDF) . Baltic Journal of Modern Computing . 7 (4). doi : 10.22364/bjmc.2019.7.4.01 .
• Cederholm, Dan (2013). Sass para diseñadores web (PDF) . A Book Apart. ISBN 978-1-937557-13-3.
• Watts, Luke (2016). Dominando el Sass . Packt Publishing.

• Sitio web oficial