And the the variables will be available in the `hugo:vars` namespace. Example usage for Dart Sass:
```scss
@use "hugo:vars" as v;
p {
color: v.$color1;
font-size: v.$font_size;
}
```
Note that Libsass does not support the `use` keyword, so you need to `import` them as global variables:
```scss
@import "hugo:vars";
p {
color: $color1;
font-size: $font_size;
}
```
Hugo will:
* Add a missing leading `$` for the variable names if needed.
* Wrap the values in `unquote('VALUE')` (Sass built-in) to get proper handling of identifiers vs other strings.
This means that you can pull variables directly from e.g. the site config: