在项目中使用Material UI的颜色库 (Color Palette)

在个人项目中本来打算自定义一套属于自己的调色方案，一开始的方法是Copy Flat UI Colors上的十六进制色值，然后写入Sass的变量中去。

后来在开发过程中发现，由于该方案的颜色跳动太大，有时候并不需要这么强的对比，于是慢慢自己在Pinterest上找ColorPalette，找着找着发现好像直接引入一个颜色分类比较全的颜色库比较省时省力。于是找到了sass-material-colors。

把sass-material-colors添加到你的项目中

npm安装

$ npm install --save-dev sass-material-colors

在Sass中引用

@import'sass-material-colors'

在stylesheet中使用

在Sass文件中直接使用material-color($color-name, $color-variant)调用。

其中，
$color-name 为颜色在Material UI Color Palette中对应的颜色名称。 (e.g.'pink','amber','blue-grey','deep-orange', etc.)
$color-variant 为颜色在Material UI Color Palette中对应的色值。 (e.g.'300','200','a100','a400', etc.)

e.g.

.content{

    color: material-color('Teal', '50');

    background: material-color('Cyan', '500');

}

当然，这个颜色库还支持Gem/ Bower等包管理器，还可以使用Class直接调用，有兴趣的同学可以到项目的GitHub上看一看。