命名规则

命名规则 是 SACSS 最核心的内容。

规则	示例
1.只取首字母	.db{ display:block; }
2.有数字直接连接	.mb10{ margin-bottom:10px; }
3.负值直接 - 连接	.mb-10{ margin-bottom:-10px; }
4.特殊符号直接用 \ 转义	.w100\%{ width:100%; } .lh1\.2{ line-height:1.2 }
5.其它或自定义样式，用 _分割	.c_fff{ color:#fff; } .bc_fff{ background-color: #ffffff; }
6.hover 样式，用 \:h分割	.fs12{ font-size:12px; } .fs12\:h:hover{ font-size:12px; }

这套命名规则看起来是如此的简单甚至是简陋。

却是作者近 10 年不同项目中不断地打磨和迭代，在开发效率和开发体验之间找到的最大平衡点。

当然你也完全可以按照自己的喜好，或者项目风格修改这套规则

颜色命名

/**

* .c_{custome name}{ color: value; }

*/

/* 灰色，通过添加 x 来递增或者递减 */

.c_xl { color: #111; }

.c_l { color: #333; }

.c_m { color: #666; }

.c_s { color: #999; }

.c_xs { color: #ddd; }

/* 彩色 */

.c_primary { color: blue; }

.c_secondary { color: gray; }

.c_danger { color: red; }

.c_warning { color: yellow; }

.c_success { color: green; }

.c_info { color: cadetblue; }

.c_light { color: #f8f9fa; }

.c_dark { color: #343a40; }

命名灵感

• Atomic CSS: 核心理念（雅虎）；
• Emmet: 命名规则灵感来自 Emmet，很多 IDE 内置这个规则;