CODEWITHSUNDEEP
csssass
Mild Fuzz
Mild Fuzz

Reputation: 30691

Abstracting your variables in SCSS

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?

Upvotes: 1

Views: 213

Answers (3)

electric_g
electric_g

Reputation: 1047

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';

Upvotes: 1

cimmanon
cimmanon

Reputation: 68319

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';

Upvotes: 3

Caelea
Caelea

Reputation: 2348

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'

Upvotes: 0

Related Questions