css - MaterializeCSS - 颜色变量有什么作用？

Question

我可能对这些变量的用途有点困惑。我去了一个调色板纠察队，它提供了类似于以下的输出:

$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

当我在 Angular 上使用 Material 时，我知道它会自动应用于 md组件，而不是普通的 HTML，所以我可能混淆了这些变量的意义。

我该如何应用它们？

我试过了 <div class="primary color">为了匹配我会强制使用颜色的语法，但它不应用 2196F3我以为会的。我也尝试过类似于

button
   color: $primary-color

在 SASS 文件中，但结果相似。我是否遗漏了一些简单的东西，或者我必须将它应用到每个具有我想要的颜色的元素

Answer 1

您的 Sass 文件中的变量只能在您的 Sass 文件中使用。浏览器不读取这些变量。

当你像这样使用预处理器时，你需要做的是编译 .scss 文件，这样它们就变成了 .css 文件，变量被它的值所取代。

例如:

样式.scss

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

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

当你编译 style.scss 文件时，它将变成一个 style.css 文件，如下所示:

a {
    color: #1976D2;
}

a:hover {
    color: #1976D7;
}

参见 Sass guide更好地理解。

要编译它，您可以使用任务运行器，它会为您节省很多时间。

看看this article about Gulp以及它的用途。