@if y @else

<< @function @each >>

Tenemos la estructura condicional @if. De tal modo que podemos jugar a modificar los colores que tenemos establecidos en función del tema que hayamos selecionado. (Sass apareció en el 2006, no fue hasta el 2019 cuando el @prefers-color-scheme fue compatible en la mayoría de navegadores)

$theme: dark;
header {
    @if $theme == dark {
        background: #000;
    }
}

Los operadores que podemos utilizar para las condiciones son: ==, !=, >, >=, <, <= para comparar números. Aunque también podemos usar == y != para comparar cadenas.

$theme: pink;
header {
    @if $theme == dark {
        background: #000;
    } @else if $theme == pink {
        background: pink;
    } @else {
        background: #fff;
    }
}

Sass considera cualquier valor distinto a falso o nulo como cierto. A diferencia de otros lenguajes, Sass considera como cierto strings vacíos, listas vacías o el número 0.

Ojo, qué pasaba con esto. Si queríamos generar un tema debíamos modificar el valor de la variable y generar su style.css de tal forma que teníamos tantos style.css como temas definíamos. Las variables en Sass son estáticas.

<< @function @each >>