项目要求：采用Sass自定义生成自己的Css库，使其不用在<style></style>里写样式，全程在class里写，一把梭(文章最后为项目地址)~
要求实现的最终结果：
class="w-600" = width: 600px
class="fs-24" = font-size: 24px
class="pt-20" = padding-top: 20px
推荐一波好的博客~
- 首先，先推荐一波好的博客，阮一峰大神的Sass解析：www.ruanyifeng.com/blog/2012/0…
- 其次，Sass的四种编译方式：blog.csdn.net/weixin_4480…
- 看了一下别人的代码：www.cnblogs.com/andrewkz/p/…
- Sass的文档：sass.bootcss.com/documentati…
代码实现：
Sass代码：
$min: 0;
$max: 100;
$step: 2;
$map: ('pt' : 'padding-top', 'pr' : 'padding-right', 'pb' : 'padding-bottom', 'pl' : 'padding-left', 'pd' : 'padding');
$i: $min;
@while $i <= $max {
@each $key, $value in $map {
.#{$key}-#{$i} {
#{$value} : #{$i}px;
}
}
$i: $i + $step;
}
我的思路: 这个要求非常简单，我的想法是采用的map的数据类型，通过Sass语法，写两个循环，然后再npm install sass -g 安装，再使用Sass编译即可(Sass编译语句，见最下方)。
生成的Css代码：
.pt-0 {
padding-top: 0px;
}
.pr-0 {
padding-right: 0px;
}
.pb-0 {
padding-bottom: 0px;
}
.pl-0 {
padding-left: 0px;
}
.pd-0 {
padding: 0px;
}
.pt-2 {
padding-top: 2px;
}
以下省略几百行代码~
遇到的小坑(指的看报错，一分钟就可以解决那种)：
1. 采用--style compact编译的时候，报错，报错信息为
-s, --style=<NAME> Output style.
[expanded (default), compressed]
也许是Sass版本更新后废弃了。
2. 编译时出现.map文件
以前的解决办法(根据报错信息来看，已失效)：
sass dev/:build/ --sourcemap=none
现在的解决办法：
sass dev/:build/ --no-source-map
笔记走起：
单文件编译：
sass dev/padding.scss build/padding.css
多文件编译(把dev目录下的文件，全部编译到build里)：
sass dev/:build/
