Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
¿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 sass
En Mac
sudo gem install compass
En 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.
Ejecución
Ejecutar directamente 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.css
Ejecutar como extensión de Visual Studio Code
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.

Ejecutar utilizando el módulo node-sass
package.json
{
"watch": {
"sass": {
"patterns": [
"src"
],
"extensions": [
"scss"
],
"quiet": true
}
},
"scripts": {
"start": "npm-watch",
"sass": "node-sass --include-path scss ./src/scss/style.scss ./src/style.css",
"sass-watch": "npm-watch sass"
},
"dependencies": {
"node-sass": "^7.0.1",
"npm-watch": "^0.11.0"
}
}
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
style.scss
@import "./colors";
Los ficheros importados deben empezar por guion bajo.
_colors.scss
$bgColor: red;
$blue: blue;
Operaciones
No te olvides de poner los espacios en blanco a ambos lados del símbolo de restar.
$n :2;
.box:nth-child(#{$n - 1}) {
background: transparent;
margin-top: #{$n*6}rem;
}
.box:nth-child(3) {
background: transparent;
margin-top: 12rem;
}
$n :2;
.box:nth-child(#{$n}) {
background: transparent;
margin-top: #{($n - 1)*6}rem;
}
$n :2;
.box:nth-child(2) {
background: transparent;
margin-top: 6rem; }