Sass es un procesador de CSS que ayuda principalmente a un desarrollador en el mantenimiento de las CSS.
Aplicación de Sass
En resumen, aplicar Sass consiste en:
- Escribir los estilos en la sintaxis de Sass en fichero con extensión "*.sass",
- Compilar el fichero *.sass para generar el fichero css correspondiente.
- Aplicar el fichero css resultante a la página web.
Aunque el uso de Sass puede ser realizado directamente desde un terminal aplicando sentencias como:
sass input.scss output.css, en esta sección nos apoyaremos del IDE Visual Studio Code (VSC).
Para esto es necesario instalar las siguientes extensiones en VSC:
- live Sass compiler .- Compilar los ficheros de sass
- live server
Sintaxis:
- Variables
$color: #FFF;- Nesting
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}- Modularización
Un fichero de Sass puede ser el resultado de piezas de código Sass de otros ficheros. Para vincular ficheros se usa @use nombre_fichero:
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
**********************
// styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}Fuente: sass-lang