# How to use site variable in sass?

**URL:** <https://talk.jekyllrb.com/t/how-to-use-site-variable-in-sass/2043>\
**Category:** Help\
**Created:** [August 10, 2018, 4:22pm UTC](https://talk.jekyllrb.com/t/how-to-use-site-variable-in-sass/2043 "2018-08-10T16:22:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [August 10, 2018, 4:22pm UTC](https://talk.jekyllrb.com/t/how-to-use-site-variable-in-sass/2043/1 "2018-08-10T16:22:35Z")

</div>

How can we use the site variables in sass files?

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [August 10, 2018, 4:59pm UTC](https://talk.jekyllrb.com/t/how-to-use-site-variable-in-sass/2043/2 "2018-08-10T16:59:26Z")

</div>

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:

```auto
# in _config.yml
background_color: '#000'

```

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

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

```

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

```css
body {
  background-color: #000;
}

```

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [August 10, 2018, 5:45pm UTC](https://talk.jekyllrb.com/t/how-to-use-site-variable-in-sass/2043/3 "2018-08-10T17:45:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [August 11, 2018, 6:14am UTC](https://talk.jekyllrb.com/t/how-to-use-site-variable-in-sass/2043/4 "2018-08-11T06:14:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [August 11, 2018, 6:16am UTC](https://talk.jekyllrb.com/t/how-to-use-site-variable-in-sass/2043/5 "2018-08-11T06:16:20Z")

</div>

Like this?

```auto
# in _config.yml
background_color: '#000'

```

```auto
---
---

$background_color: {{ site.background_color }}

body
   background-color: $background_color

```

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [August 11, 2018, 2:55pm UTC](https://talk.jekyllrb.com/t/how-to-use-site-variable-in-sass/2043/6 "2018-08-11T14:55:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MikeBeaton](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mikebeaton/32/1658_2.png) [@MikeBeaton](https://talk.jekyllrb.com/u/MikeBeaton)\
**Post date:** [April 23, 2019, 1:11pm UTC](https://talk.jekyllrb.com/t/how-to-use-site-variable-in-sass/2043/8 "2019-04-23T13:11:06Z")

</div>

> 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.