Question

我正在使用物化，我试图不触摸你的代码，所以我可以在新版本到货时升级它，但我想改变原色，我找不到一个简单的方法只需将整个事情切换成蓝色调色板。

我听说过sass但我不知道如何使用它

这是我的CSS和JS文件如何重用它

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="sass/materialize.scss">
<script src="js/bin/materialize.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Answer 1

使用sass非常简单，在系统中安装sass cli

gem install sass

您要更改的基色位于以下文件夹

中

兑现-SRC / SASS /组件/ _color.scss

进行必要的更改
只需在终端
中运行以下代码即可
sass materialize.scss materialize.css

在 materialize-src 的 scss 文件夹内运行

兑现-SRC / SASS /

替换现有项目中新创建的 materialize.css 文件。

您甚至可以使用https://cssminifier.com/创建新文件的缩小版本，并使用名称materialize.min.css保存文件

有关sass的更多参考请查看以下链接SASS Simple DOC

更新 - 根据要求

根据您的要求给我颜色代码，替换下面的代码我会按照上面说明的相同程序生成您的文件。

$teal: (
  "base":       #009688,
  "lighten-5":  #e0f2f1,
  "lighten-4":  #b2dfdb,
  "lighten-3":  #80cbc4,
  "lighten-2":  #4db6ac,
  "lighten-1":  #26a69a,
  "darken-1":   #00897b,
  "darken-2":   #00796b,
  "darken-3":   #00695c,
  "darken-4":   #004d40,
  "accent-1":    #a7ffeb,
  "accent-2":    #64ffda,
  "accent-3":    #1de9b6,
  "accent-4":    #00bfa5
);

Answer 2

您是否尝试通过在头标记中定义

来使用这样的内容

<style>
* {
    background-color: yellow;
}
</style>

如果您使用此通用样式，它将以您应该使用的相同方式应用于整个页面，如果您使用段落标题标签或其他一些东西，只需使用您自己的样式在此花括号中定义您的标记。

如何在不使用materilaize中的自定义CSS的情况下将默认主题颜色teal更改为蓝色

2 个答案: