Introducción
SASS (Syntactically Awesome Stylesheets) es un preprocesador de CSS que permite escribir hojas de estilo de manera más eficiente, estructurada y con características avanzadas que no están disponibles en CSS nativo. Es una herramienta que compila su código en CSS estándar, el cual luego puede ser interpretado por los navegadores.
Principales características principales de SASS
Variables
Permite definir variables para reutilizar valores como colores, tamaños, fuentes, etc.
1
2
3
4
$primary-color: #3498db;
body {
background-color: $primary-color;
}
Anidación
Facilita la organización del código al permitir anidar selectores dentro de otros, reflejando la jerarquía HTML.
1
2
3
4
5
6
7
8
nav {
ul {
margin: 0;
li {
list-style: none;
}
}
}
Mixins
Permite reutilizar fragmentos de código con argumentos personalizables.
1
2
3
4
5
6
7
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
}
button {
@include border-radius(10px);
}
Cómo usar SASS
Para usar SASS necesitas instalarlo y configurarlo para compilarlo a CSS. Para ello debes seguir lso siguientes pasos.
Instala node, reinicia el ordenador y comprueba que está instalado con la siguiente instrucción:
1
node -v
Crea una carpeta o usa una carpeta existente para crear un proyecto de node con la instrucción:
1
npm init -y
Instala SASS (por ejemplo, usando npm):
1
npm install -g sass
Compila tu archivo .scss en CSS:
1
sass input.scss output.css
También puedes ejecutar el siguiente comando para que se autocompile directamente cada vez que haces cambios en el fichero .scss:
1
sass --watch input.scss output.css