做前端开发，你一定或多或少的用过一些CSS工具库，比如Bootstrap, Tachyons等。
但是不同的库对于类名的定义不尽相同，使用起来难免有些不太得心应手。
本文将教你怎么用sass一步一步构建自己的样式库。
其实不难。如果对sass用法还不太熟悉，可以先看下这篇文章SASS用法指南。
环境配置
首先需要安装node-sass，后续我们会用它将.scss文件编译成.css文件
npm install -g node-sass
接下来我们新建一个文件style.scss
定义网页基础样式
定义一些共通的基础样式：
* {
box-sizing: border-box;
outline: none;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
body {
margin: 0;
font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
......
这部分不做详细的介绍，可以根据自己的需要随意的增减。
构建字体尺寸样式
下面以构建字体尺寸为例，介绍如何只用几行代码就可以一次构建多个字体尺寸类。
首先新建一个字体尺寸的Map类型数据结构。
$fontSizeMap: (
0: 0,
1: 0.5rem,
2: 1rem,
3: 1.5rem,
4: 3rem,
);
然后通过@each对$fontSizeMap进行遍历：
@each $key, $val in $fontSizeMap {
.ft-#{$key} {
font-size: #{$val};
}
}
在终端编译一下style.scss
node-sass style.scss style.css
如果编译成功，会在同级目录下生成一个style.css文件。
打开style.css文件，我们通过scss创建的字体尺寸的类就已经自动编译好了。
.ft-0 {
font-size: 0; }
.ft-1 {
font-size: 0.5rem; }
.ft-2 {
font-size: 1rem; }
.ft-3 {
font-size: 1.5rem; }
.ft-4 {
font-size: 3rem; }
以后如果需要增加新的尺寸的字体，直接在$fontSizeMap中添加一条数据，然后重新编译一下就好了。
使用同样的方式，我们可以很方便的构建一整套其他样式，比如：字重，文字颜色，背景颜色，边框大小等等。
构建margin/padding样式
接下来介绍一个复杂一点的，以margin/padding为例。
最终要生成下面这三类样式：
- 每条边：类似mt0, mr0, mb0, ml0
- 对角边: mx0, my0
- 所有边: ma0
首先要定义三个Map类型数据结构
- 类型:
$spaceTypes: (
m: margin,
p: padding
);
- 方向:
$spaceDirections: (
t: top,
r: right,
b: bottom,
l: left
);
- 边距大小
$spaceSizes: (
0: 0,
1: .5rem,
2: 1rem,
3: 1.5rem,
4: 3rem,
);
然后同样利用@each函数遍历以上三个数据结构，但是需要多层嵌套:
@each $typeKey, $type in $spaceTypes {
@each $sizeKey, $size in $spaceSizes {
// mt0, mr0, mb0, ml0
@each $directionKey, $direction in $spaceDirections {
.#{$typeKey}#{$directionKey}#{$sizeKey} {
#{$type}-#{$direction}: $size;
}
}
// mx0, my0
.#{$typeKey}x#{$sizeKey} {
#{$type}-left: $size;
#{$type}-right: $size;
}
.#{$typeKey}y#{$sizeKey} {
#{$type}-top: $size;
#{$type}-bottom: $size;
}
// ma0
.#{$typeKey}a#{$sizeKey} {
#{$type}: $size;
}
}
}
再次编译style.scss，就能看到我们一次创建了70个类。
$spaceTypes.length * ($spaceDirections.length + 3) * $spaceSizes.length
=> 2 * (4 + 3) * 5 = 70
在上文中我们定义了很多的Map类型数据结构，为了以后维护方便，最好把他们放到一个单独的文件中。
新建一个文件_variables.scss。把之前定义的所有变量都放到这里维护。
在style.scss中通过import把它们引入进来。
@import './variables';
上面新建的文件名前面有个_， _表示此文件将不会被编译为css文件，并且引用该文件的时候带不带_都可以。
总结
通过上面的介绍，你会发现，其实核心就是@each的用法，如果在配合一些@if @else条件语句，就可以很方便的构建一个非常轻量级的样式库。
如果你是利用构建工具(Gulp, Webpack等)编译，配合autoprefixer可以很方便的构建一个兼容各个浏览器的样式库。
下面是笔者自己创建的一个css样式库，里面包含了开发中常用的一些样式的定义。
如果你觉着有需要可以直接拿去用，或者自行进行增减。
