Sass (idioma)
| Hablar con descaro a | ||
 | ||
| Fecha de la primera versión | en 2006 28 de noviembre | |
|---|---|---|
| Desarrolladores | Natalie Weizenbaum y Chris Eppstein | |
| Última versión | 3.6.5 (21 de mayo de 2021) | |
| Influenciado por |
CSS YAML Haml |
|
| Licencia | MIT | |
| Sitio web | sass-lang.com | |
Sass ( S yntactically un wesome s tyle s heets) es un preprocesador lenguaje de script que está compilado o interpretado en CSS (Cascading Style Sheets). SassScript es el lenguaje de programación en sí mismo.
Sass consta de dos sintaxis . La sintaxis original, llamada "sintaxis con sangría" usa sangría para separar bloques de código y saltos de línea para separar reglas. La nueva sintaxis, "SCSS", utiliza los mismos separadores de bloques que CSS. Los archivos de sintaxis con sangría y SCSS usan las extensiones .sassy respectivamente .scss.
La sintaxis con sangría es metalenguaje y SCSS es metalenguaje anidado porque CSS válido es SCSS válido sin modificación de sintaxis.
SassScript proporciona los siguientes mecanismos: variables , anidamiento, mixins y herencia de selectores.
Caracteristicas
Variables
Sass permite el uso de variables. Las variables deben comenzar con el signo de dólar ( $). La asignación de variables se realiza con dos puntos ( :). Las variables pueden ser argumentos o resultados de cualquiera de las muchas funciones disponibles. Durante la compilación, las variables se reemplazan por sus valores en el archivo CSS de salida.
| SCSS | Hablar con descaro a | CSS compilado |
|---|---|---|
| $primary-color: #3bbfce; $margin: 16px; .content-navigation { border-color: $primary-color; color: darken($primary-color, 10%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $primary-color; } | $primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color | .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } |