How to define sass variables for all scss files

Question

In my project i use many scss files (more than 100 files).
The file structure is similar to the BEM project.

scss/

--block/block.scss

----/__elem/block__elem.scss

--menu/menu.scss

----/__elem/menu__elem.scss

and etc...

All files compiled to css files with gulp-sass plugin and concatenated to 1 css file app.css

The same folder i have 2 scss files.

_variables.scss - for define custom variables

style.scss - main file (i use that file to import my variables).

scss/



_variables.scss



style.scss

In style.scss file contained import line with variables

@import "utilities/variables";

Yes, all variables is successful define in style.scss file, but how to define my variables for others scss files (for all scss files in folders and subfolders)?

For another files except style.scss in gulp project gives an error message:

out:     error sass/menu/menu.scss (Line 5: Undefined variable: "$laptop".)

Thanks in advance.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

I solved this problem. Now i just concatenate all scss file with variables and only then connect them to the general css. Something like this:

sass/**/*.scss + _variables.scss> app.scss > app.css

How to define sass variables for all scss files

Sign up