Abstracting your variables in SCSS

Question

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?

Answer 1

The problem is how you named the scss files. The way you are importing the files makes SASS think that you are using the @import CSS rule https://developer.mozilla.org/en-US/docs/CSS/@import Rename those files only with the scss extensions, remove the ".css", and import them like this

@import 'variables.scss';
@import 'helpers.scss';
@import 'layout.scss';

or you can even skip the extension at all

@import 'variables';
@import 'helpers';
@import 'layout';

Answer 2

You can do it that way if you're ok with an extra file as a middleman.

_master.css.scss:

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

site.css.scss:

@import '_master.css';

Answer 3

If you want variables to be available on the other files you'll need to include that css in them as well. So basically layout.css.scss and helper.css.scss will need to have @import 'variables.css'