# How to use SCSS variables?

**URL:** <https://talk.jekyllrb.com/t/how-to-use-scss-variables/2124>\
**Category:** Help\
**Created:** [August 29, 2018, 5:59pm UTC](https://talk.jekyllrb.com/t/how-to-use-scss-variables/2124 "2018-08-29T17:59:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pier](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pier](https://talk.jekyllrb.com/u/pier)\
**Post date:** [August 29, 2018, 5:59pm UTC](https://talk.jekyllrb.com/t/how-to-use-scss-variables/2124/1 "2018-08-29T17:59:35Z")

</div>

I’m trying to use SCSS/SASS with Jekyll but I’m getting this error when using a variable:

```auto
Jekyll::Converters::Scss encountered an error while converting 'css/styles.scss':
Invalid CSS after " color: ": expected expression (e.g. 1px, bold), was "$some-color;"

```

In `css/styles.scss` :

```auto
---
---

@import 'index.css';

```

In `_sass/_vars.scss` :

```auto
$some-color: #4d4d4d;

```

In `_sass/index.scss` :

```auto
@import '_vars.scss';

body {
    color: $some-color;
}

```

What am I missing?

---

<div class="post-metadata">

**Author:** ![ashmaroli](https://avatars.discourse-cdn.com/v4/letter/a/df705f/32.png) [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)\
**Post date:** [August 29, 2018, 6:31pm UTC](https://talk.jekyllrb.com/t/how-to-use-scss-variables/2124/2 "2018-08-29T18:31:50Z")

</div>

I think the `vars` partial is not being imported properly… (order matters)  
Try dropping the extension and import everything at one place:

in `css/styles.scss`

```auto
---
---
@import '_vars', 'index';

```

then in `_sass/_vars.scss`

```auto
$some-color: #4d4d4d;

```

and in `_sass/index.scss`

```auto
body {
    color: $some-color;
}

```

---

<div class="post-metadata">

**Author:** ![pier](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pier](https://talk.jekyllrb.com/u/pier)\
**Post date:** [August 29, 2018, 6:46pm UTC](https://talk.jekyllrb.com/t/how-to-use-scss-variables/2124/3 "2018-08-29T18:46:07Z")

</div>

Thanks.

The problem was that my variable wasn’t named correctly as it started with a number.

After figuring this out everything works as expected.