Abstracting your variables in SCSS
-
14-07-2021 - |
質問
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?
解決
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';
他のヒント
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';
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'