I have a parent SCSS file that is importing my other CSS files:

```
@import 'variables.css';
@import 'helpers.css';
@import 'layout.css';

```

And I have three scss files: variables.css.scss;helper.css.scss & layout.css.scss.

In variables I am defining colours, fonts and sizes to be used throughout the site. The trouble is I assumed these variables will be available to the other documents so long as it is imported first, but I am getting `Undefined Variable` errors.

I assume I just have the process wrong. Where am I going wrong?