¿Para qué sirve?
SASS (Syntactically Awesome Style Sheets) permite convertir el CSS en algo dinámico, añadiendo la posibilidad de definir variables y funciones.
Características
SASS dispone de dos formatos diferentes para la sintaxis:
- .sass:
- Es más antiguo.
- No utiliza llaves ni punto y coma final
body background: #000 font-size: 62.5%
- .scss:
- Es la versión 3 del preprocesador.
- Permite utilizar llaves e incorporar código clásico.
En el presente curso estudiaremos el código correspondiente a la extensión SCSS
En este enlace podemos ver la hoja de estilos resultante de ejecutar código SASS.
Instalación
Por consola
En windows:
Primero habrá que instalar ruby. Podemos descargarlo desde este enlace.
npm install -g sassEn Mac
sudo gem install compassEn linux
sudo apt-get -y install ruby &&
sudo su -c "gem install sass"También es posible utilizar sass mediante aplicaciones, en lugar de mediante la línea de comando.
Ejecutar SASS desde la consola
Es necesario que el fichero .scss exista de antemano.
No es necesario que el fichero .css exista de antemano.
sass --watch filename.scss:filename.cssComo extensión de Visual Studio Code (mi recomendación)
1. Instalamos la extensión Live Sass Compile.
2. Creamos un fichero con extensión .SCSS
3. Activamos la extensión (barra de tareas ubicada en la esquina inferior derecha de la pantalla) para que vaya observando los cambios que hacemos en el documento .scss y generando el documento .css automáticamente.
Variables en SASS
$brand: #F98355;
body{
color:$brand;
}Nesting
div{
a{
&:hover{
}
}
}Mixings, o pedazos de código reutilizable
@mixin circle($width) {
width: $width;
height: $width;
border-radius: 100%;
background:black;
}
div{
@include circle(100px);
}Herencia en SASS
.featured{
background:#000;
width:100px;
height:100px;
padding:10px;
}
div{
@extend .featured;
color:orange;
font-family:sans-serif;
}@Import
.featured{
background:#000;
width:100px;
height:100px;
padding:10px;
}
div{
@extend .featured;
color:orange;
font-family:sans-serif;
}