SASS: Mixin

En index.html:
<div class="div1">lunes</div>
<div class="div2">martes</div>
<div class="div3">miércoles</div>
<div class="div4">Jueves</div>

En edc.scss:
@mixin divAux($fondo:#2C2961, $ancho:200px) {
    background-color: $fondo;
    width:$ancho;
    height:250px;
    margin-top:5px;
    padding:10px;
}

.div1 {
    @include divAux(#111, 100px);
}
.div2 {
    @include divAux(#222);
}
.div3 {
    @include divAux(#333, 300px);
}
.div4 {
    @include divAux(#444,400px);
}


SASS: Importar

Dentro de la carpeta sass creamos tres ficheros:
_variables.scss
_header.scss
_footer.scss

_variables.scss:
$colorAma: yellow;
$colorRojo: red;
$colorAzulEspecial: #2C2961;

_header.scss:
header {
    h4 {
        color: $colorRojo;
        a { color:$colorAma;}
    }
}

_footer.scss:
footer {
    p { font-size:20px;background:$colorAma;}
}

Y luego en nuestro estilos.scss:
@import "variables";
@import "header";
@import "footer";

h1 { color: $colorAzulEspecial; }


SASS: Variables

$colorAma: yellow;
$colorRojo: red;
$colorAzulEspecial: #2C2961;


h1 { color: $colorAzulEspecial; }
h4 {
    color: $colorRojo;
    a { color:$colorAma;}
}

footer {
    p { background:$colorAma;}
}

SASS

Antes de nada en windows apretamos inicio y buscamos windows powershell,y escribimos en esa consola:
Set-ExecutionPolicy Unrestricted

y escribir S

Vamos ahora a la consola de Visual Studio Code para instalar sass:

npm install -g sass

// para comprobar que está bien instalado:
sass -v

Creamos una carpeta css y otra carpeta sass

Ejecutamos desde la consola de Visual Studio Code:

sass --watch sass:css

Así todo lo que escribamos a partir de ahora en la carpeta sass lo clonará también en la carpeta css, por ejemplo al crear:
otraprueba.scss

Te genera automáticamente en la carpeta css:
otraprueba.css
otraprueba.css.map