How to use site variable in sass?

Help
1

How can we use the site variables in sass files?

1 Like
2

Just as you would in any include or layout… with site.name_of_variable

You can’t use it in any Sass file though. It has to be the top level one that Jekyll processes and has to have YAML Front Matter so it can use Liquid to pull in the variable.

Simplified example:

# in _config.yml
background_color: '#000'

---
# in your top-level .scss file
---

body {
  background-color: {{ site.background_color }};
}

Will give you the following .css when Jekyll processes the Sass.

body {
  background-color: #000;
}
1 Like
3

I think you can also assign it to a sass variable at that point, and then that can be used in the sass partials.

4

I have tried adding it inside the site variables in .sass file inside _sass folder, but it didn’t work.

5

Like this?

# in _config.yml
background_color: '#000'

---
---

$background_color: {{ site.background_color }}

body
   background-color: $background_color
6

I don’t think it can be in the _sass folder. You should be able to do it in the file where you import all of the sass files, which for me is something like /assets/css/main.scss.

If I remember correctly the _sass folder is not processed by jekyll and shouldn’t have front matter.

8

I think you can also assign it to a sass variable at that point, and then that can be used in the sass partials.

For me, that doesn’t work. I had to put any sass which uses site variables directly into a top level .scss file. The variables defined in the top level file don’t seem to be visible in the included files.