MaterializeCSS - What do the color variables do?

Question

I might be a bit confused on the purpose of these variables. I went to a color pallette picket, and it provided an output similar to:

$primary-color-dark:   #1976D2
$primary-color:        #2196F3
$primary-color-light:  #BBDEFB
$primary-color-text:   #FFFFFF
$accent-color:         #FF5722
$primary-text-color:   #212121
$secondary-text-color: #757575
$divider-color:        #BDBDBD

When I use Material on Angular, I'm aware it automatically applies to md components, and not normal HTML so perhaps I am confusing the point of these variables.

How exactly do I apply them?

I've tried <div class="primary color"> to match the syntax I would to force a color but it doesn't apply the 2196F3 I would thought it would. I've also tried similar to

button
   color: $primary-color

in the SASS file, but similar results. Am I missing something simple, or so I have to apply it to every element with the color I want

Answer 1

The variables in your Sass files can be used only in your Sass files. The browser don't read these variables.

When you use preprocessors like this, what you need to do is to compile the .scss files, so they become .css files with the variables being substituted by its values.

For example:

style.scss

$primary-color: #1976D2;
$primary-color-hover: #1976D7; 

a {
    color: $primary-color;
    &:hover {
        color: $primary-color-hover;
    }
}

When you compile the style.scss file it'll become a style.css file like this:

a {
    color: #1976D2;
}

a:hover {
    color: #1976D7;
}

See the Sass guide to understand better.

And to compile it, you can use a task runner, it'll save you a lot of time.

Take a look at this article about Gulp and for what it's used for.