简介
Candy-theme-flat 是一个基于 Sass、Compass 的可自定义的扁平化主题，它可以快速地让你的 Web 应用程序带有一种清新、简洁的界面风格。除此之外，Candy-theme-flat 还提供了很多有用的 mixin 和函数，能够极大地方便 Web 开发者进行样式设计。
安装
要使用 Candy-theme-flat，首先需要安装 Sass 和 Compass。如果你还没有安装的话，可以通过终端运行以下命令进行安装：
$ gem install sass $ gem install compass
接着，你需要在终端中运行以下命令来安装 Candy-theme-flat：
$ npm install candy-theme-flat --save
使用
安装好 Candy-theme-flat 之后，你可以直接在你的 Sass 文件中引入它：
@import "candy-theme-flat";
这时，你就可以使用 Candy-theme-flat 中的 mixins 和变量了。比如，要使用 Candy-theme-flat 中的 $candy-red 变量来设置一个元素的背景颜色，你可以这样写：
.background {
background-color: $candy-red;
}Candy-theme-flat 还提供了很多有用的 mixin，比如按钮样式 mixin：
.btn {
@include candy-button;
}以上代码就可以为一个按钮元素添加上 Candy-theme-flat 的按钮样式。
自定义
Candy-theme-flat 提供了很多可自定义的变量，你可以在项目中修改这些变量，从而快速地实现自己的 UI 风格。
比如，你可以修改 $candy-primary-color 变量，使之成为你喜欢的颜色：
$candy-primary-color: #008080;
当你重新编译后，Candy-theme-flat 中所有使用 $candy-primary-color 的地方都会被修改成你所指定的颜色。
如果你想进一步自定义 Candy-theme-flat 的样式，可以在你的项目中创建一个 _candy-theme-flat-custom.scss 文件，其中可以包含你自己的 Sass 样式代码。这个文件会被自动的合并到 Candy-theme-flat 的样式中，从而实现个性化样式。
示例代码
-- -------------------- ---- ------- -- -- ---------------- ------- ------------------- -- ---------- --------------------- -------- ----------------------- -------- -- -------- ---- - -------- ------------- - -- ------------ ---------- - ----------------- ----------------------- -------- ----- - -- ----------- -- - ----------- ------- - -- -------- ------- - ------- --- ----- --------------------- -
总结
Candy-theme-flat 是一个非常实用的 Sass 库，它提供了很多有用的 mixin 和变量，让开发者可以快速地实现清新、简洁的 UI 风格。此外，Candy-theme-flat 还提供了自定义的功能，可以满足更多的样式需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c92ccdc64669dde59f9