Materialize: Undefined Variable Error while updating a .scss file into .css

[soumya-99]

"Undefined Variable" Error while updating a SASS file into CSS

• Each and every .scss file has an error like "Undefined Variable".
• Please fix the error as quickly as possible, and make materialize a highly customized tool for web designing.

[doughballs]

Any more information about exactly how you're using SASS in your project? I use SASS all the time with no problem. This is likely to be operator error rather than an issue.

[soumya-99]

Any more information about exactly how you're using SASS in your project? I use SASS all the time with no problem. This is likely to be operator error rather than an issue.

I just created a navbar and changed the border-radius of it. In the mean time, I changed it's bg color by using '.blue' class. But I found, there's present the primary color accent of nav in the background at the four corners from it. That's why I wanted to change only the primary color of the navigation panel by importing "_navbar.scss" in a main.scss file. In main.scss file, I set the value for $primary-color as transparent before the line of importing. Then, I was updating it in a new style.css file by using "sass main.scss style.css" command. In that time, the error ("Undefined Variable $navbar-height-mobile") occurs.

[doughballs]

@soumya-99 so this is not an issue with the framework, but an issue with how you are doing it. Please close the issue. In future use the Gitter channel to ask for help on how to use the framework.

1) If importing Materialize into your custom stylesheet, use this at the top:

@import "materialize";

2) This references materialize.scss, which is itself a bunch of imports:

https://github.com/Dogfalo/materialize/blob/v1-dev/sass/materialize.scss

You comment out which components you don't need (or include them all).

3) You can amend these components in 3 ways:

a) in _variables.scss (this is the _ONLY_ place where $primary-color should be set. Do not change it anywhere else. It sets the primary color for the entire theme)
b) in the component itself (for instance, in _navbar.scss)
c) In your own css, by overriding the classnames.

[soumya-99]

@doughballs Thank you for your kind information. I'll close the issue.