Variáveis padrão no SASS

Em alguns casos, se o valor de uma variável ainda não está definido, mas precisa ser usado no código, podemos atribuir a ela um valor padrão, após o qual colocamos a marcação !default.

É importante notar que se à variável já foi atribuído um valor anteriormente, ele permanecerá o mesmo, mas se criarmos uma nova variável vazia, o valor padrão será atribuído a ela.

styles.scss$name: "John";
$name: "Bob" !default;
$new_name: "Mark" !default;

#main {
  name: $name;
  new_name: $new_name;
}

O resultado da compilação do código fornecido será o seguinte:

styles.css#main {
  name: "John";
  new_name: "Mark";
}

Se atribuirmos o valor null a uma variável, !default a considerará como um valor não atribuído:

styles.scss$name: null;
$name: "Bob" !default;

#main {
  name: $name;
}

Após a compilação, veremos:

styles.css#main {
  name: "Bob"; 
}