Sass variables require colors to be imported

Hello. I’d like to import variables to my website’s sass file but after adding: @import "../bower_components/materialize/sass/components/_variables.scss"; I’m getting following error:

Error: $color: 'color("materialize-red", "lighten-2")' is not a color for `lighten'
        on line 37 of /opt/lampp/htdocs/materialcv/static/bower_components/materialize/sass/components/_variables.scss
        from line 10 of /opt/lampp/htdocs/materialcv/static/sass/page.scss

If I import materialize colors component before variables it all will work well. The problem is I don’t want to include colors for the second time becuase they are already included in materialize. They are 1.6k lines trash in my output css file

Sass 3.4.21 (Selective Steve) materialize#0.97.7

[tomscholz]

Wrapping the function that creates these colors in a variable could solve the problem. We would have to split the current _colors.scss file into two files: _colors.scss and _color-palette.scss.

The palette would only contain the palette and the sass function, that allows you to access the colors via color("name_of_color", "type_of_color"). The _colors.scss file would only contain the if statement, that optionally generates all the colors and the primary/secondary classes.

With these changes, you could easily access the palette by importing it before anything else.

E.g.: _variables.scss:

// Setting this to false will prevent materialize from generating classes for all colors from the color pallette.
// We highly recommend to set this to false when going into production!
$generate-color-classes: true !default;

_colors.scss:

@if $generate-color-classes == true {
// Generate colors...
}

In addition to that, I think it would make sense to provide classes that apply the primary and secondary class:

// Primary and Secondary
.primary {
  background-color: $primary-color !important;

  &-text {
    color: $primary-color !important;
  }
}

.secondary {
  background-color: $secondary-color!important;

  &-text {
    color: $secondary-color !important;
  }
}

[dafriend]

My solution was to create a new partial - components/_palette.scss. - and move all the lists (i.e. $materialize-red: (... and the @function color() definition in _color.scss to the new file. Now, all _color.scss does is create css classes.

In materialize.scss the line @import "components/palette"; was added above @import "components/color"; The result is that Materialize compiles as it should.

Now, to use Materialize variables in a site’s css: (without duplicating the color classes) do this.

@import "components/palette";
@import "components/variables";

materialize#0.97.7 If you want a pull request let me know.