How to override scss variables?

Question

I am currently using materialize.css and I want to override the default variables so that the main file remain unchanged. What I am trying in my main stylesheet.scss is like

@import '_materialize';
@import '_modified';
@import '_new';

In my _modified file I am setting

$secondary-color: color("blue", "darken-1");

In materialize.scss, _variable.scss is already imported (default framework file) in which secondary color value is

$secondary-color: color("teal", "lighten-1") !default;

Still secondary color remain teal.How to override with external scss file like this one?

Edit-1: Found the solution.

$secondary-color: color("teal", "lighten-1") !default;

was not working due to not loading color mixin file of materialize css.

After @import "materialize/components/color"; in modified.scss and then

$secondary-color:color("teal", "lighten-5");

works now.

Answer 1

Import your vars first (not last):

@import '_your-vars'; // your own vars
@import '_materialize'; // includes framework vars
... // other modifications

As far as I understand the SCSS !default flag: it's a fallback, when nothing has been declared before. So when you import your variables (only the variables, no other modifications which might have dependencies) first, it will work.