Introducción al lenguaje SASS
En este tutorial estudiaremos el preprocesador SASS. SASS es una alternativa al preprocesador LESS, que también permite programar en CSS.
En realidad SASS tiene dos variantes de sintaxis, la primera variante también se llama SASS, y la segunda - SCSS. Ambos admiten el mismo conjunto de funciones y solo se diferencian ligeramente en la sintaxis. Sin embargo, dado que SCSS es más nuevo y ampliamente utilizado, en este tutorial estudiaremos precisamente este.
Entonces, la sintaxis SCSS es similar a la sintaxis CSS,
es decir, veremos las mismas llaves
y las mismas comillas con punto y coma que en CSS.
Consideremos un ejemplo de sintaxis SCSS,
donde inmediatamente asignamos a las variables la fuente
y el color, después de lo cual asignamos estas variables
a las propiedades en el selector body:
$font: Helvetica, sans-serif;
$color: #333;
body {
font: $font;
color: $color;
}