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文件，变量被其值替换。

例如：

<强> style.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以及它的用途。

MaterialiseCSS - 颜色变量有什么作用？

1 个答案: