How to use SCSS variables?

Help
1

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

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 :

---
---

@import 'index.css';

In _sass/_vars.scss :

$some-color: #4d4d4d;

In _sass/index.scss :

@import '_vars.scss';

body {
    color: $some-color;
}

What am I missing?

2

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

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

then in _sass/_vars.scss

$some-color: #4d4d4d;

and in _sass/index.scss

body {
    color: $some-color;
}
3

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.