有需求才有动力！
写CSS的时候，你经常会遇到要设置一个小边距，比如设置：
所有内边距10px，外左边距20px，内右边距0，上下内边距50px，外左右边距自动….
而你是不是又不想自己单独为它们定义一个class，然后把padding, margin之类的写进去？
举例如下：
现在我有两个p标签，我想让这两个p标签中间相隔10px，那是不是需要？
<p style="margin-bottom:10px">Hello</p> <p>World</p>
又或者
<p class="m">Hello</p>
<p>World</p>
.m {
margin-bottom: 10px;
}类似这样的情况多了去了，每次都要定个样式就为了解决个边距问题？
能忍吗？能忍吗？反正我是不能忍。改改改，燥起来！
那么为了解决这么一个问题，我们首先要想好解决标准。
首先边距问题，我们首先要定义这么几个层级：
极小、很小、小、正常、中等、大、很大、极大。
对应的边距划分为：
2px、5px、10px、15px、20px、30px、40px、50px。
那么代号就标记为：
xxs、xs、sm、‘空’、md、lg、xl、xxl。
另外我们还有其他的样式，比如自动auto、初始化initial、继承inherit、无边距none。
那么代号标记为auto、ii、ih、none。
这样的划分基本可以满足需求。
然后定义几个简称：
我们用到的单词有内边距、外边距、上下左右等，那么定义如下：
padding->p、margin->m、right->r、left->l、top->t、bottom->b、horizontal->h、vertical->v。
其中horizontal和vertical指代水平方向和垂直方向，也就是同时设置左右或者同时设置上下。
当然不能忽略了反向边距，比如外边距是负10px，这个也需要用一个简称，我们定义为n，是反向的意思。
如此一来，所有的简称和边距就规定好了。
通过上面的层级关系和简称划分，我们可以对他们进行自由组合，形成一个个class样式。比如：
.p-t-xs 即为上内边距是5px，.p-h-md 即为左右内边距是20px，.p-b-n-lg 即为下内边距是-30px，
.p-r-xxl 即为右内边距是50px，.p-t 即为上内边距为正常边距15px（正常边距省略即可），.p-n 即为内边距是-15px。
.p-v-n 即为上下内边距是-15px，.m-h-auto 即为水平左右外边距是自动auto, .m-t-ii 即为上外边距是初始化initial。
.m-r-none 即为右外边距是0。
怎样？通过这样的定义，能不能找出规律？即
第一个字母p或者m，代表padding或者margin。
第二个字母代表方向，t上方、b下方、l左方、r右方、v上方和下方、h左方和右方。
第三个（组）字母代表距离，xs是+2px，n-lg是-30px，空是自动边距15px，n是反向正常值-15px，ii是初始化，none是无，auto是自动边距。
怎样？有了这些定义，我们是不是就能非常方便地设置边距样式了？刚才的边距怎样解决？很简单，只需要
<p class="m-b-sm">Hello</p> <p>World</p>
如果一个网页里有很多样式，那只需要把整个样式文件引入，自由地添加class就好了。
这么多组合呢？写CSS不累死了？检查也不好检查。
怎么办？上Sass！
首先我们先定义一层映射，边距映射：
$map: (none: 0, auto: auto, ii: initial, ih: inherit, xxs: 2px, xs: 5px, sm: 10px, '': 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px,
n-xxs: -2px, n-xs: -5px, n-sm: -10px, n: -15px, n-md: 20px, n-lg: 30px, n-xl: -40px, n-xxl: -50px);这里定义了所有的边距和它的简称。
然后我们尝试写一下padding的函数，遍历一下：
@each $style, $padding in $map {
.p-#{$style} {
padding: $padding !important;
}
}这，那空的咋办? 不能留个下划线啊。判断一下
@function line($style) {
@if $style != '' {
@return '-';
} @else {
@return '';
}
}
@each $style, $padding in $map {
$line: line($style);
.p#{line}#{$style} {
padding: $padding !important;
}
}这样我们就生成了所有padding边距的设置。
好接下来设置下水平和垂直边距吧，这个就需要两句话了，比如设置水平你得写padding-left 和 padding-right。
有的小伙伴说了，可以直接写一个啊，比如 padding: 0 20px 就可以，不过这样你同时设置了上下边距。即便上下边距我们设置成inherit或者什么其他的，那也多多少少在某种情况下产生影响。
所以这里我们直接分开，而且就算不分开，你之前的映射就要修改，还是麻烦的。
所以这里定义如下：
@each $style, $padding in $map {
$line: line($style);
.p-v#{$line}#{$style} {
padding-top: $padding !important;
padding-bottom: $padding !important;
}
}
@each $style, $padding in $map {
$line: line($style);
.p-h#{$line}#{$style} {
padding-left: $padding !important;
padding-right: $padding !important;
}
}那最后，单边距的定义如下，我们给它加个循环：
$directions: (t: top, b: bottom, l: left, r:right);
@each $d-key, $d-value in $directions {
@each $style, $padding in $map {
$line: line($style);
.p-#{$d-key}#{$line}#{$style} {
padding-#{$d-value}: $padding !important;
}
}
}如此一来，padding的就写好了！
那么margin的怎么办？很简单，再加一层循环，最终代码如下：
@function line($style) {
@if $style != '' {
@return '-';
} @else {
@return '';
}
}
$map: (none: 0, auto: auto, ii: initial, ih: inherit, xxs: 2px, xs: 5px, sm: 10px, '': 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px,
n-xxs: -2px, n-xs: -5px, n-sm: -10px, n: -15px, n-md: 20px, n-lg: 30px, n-xl: -40px, n-xxl: -50px);
$names: (m: margin, p: padding);
@each $n-key, $n-value in $names {
@each $style, $padding in $map {
$line: line($style);
.#{$n-key}#{$line}#{$style} {
#{$n-value}: $padding !important;
}
}
@each $style, $padding in $map {
$line: line($style);
.#{$n-key}-v#{$line}#{$style} {
#{$n-value}-top: $padding !important;
#{$n-value}-bottom: $padding !important;
}
}
@each $style, $padding in $map {
$line: line($style);
.#{$n-key}-h#{$line}#{$style} {
#{$n-value}-left: $padding !important;
#{$n-value}-right: $padding !important;
}
}
$directions: (t: top, b: bottom, l: left, r:right);
@each $d-key, $d-value in $directions {
@each $style, $padding in $map {
$line: line($style);
.#{$n-key}-#{$d-key}#{$line}#{$style} {
#{$n-value}-#{$d-value}: $padding !important;
}
}
}
}如此一来，Sass便成功生成了。
写完了那自然要编译一下咯，废话不多说上gulp。
gulp.task('styles', () => {
return gulp.src(path.sass)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: true,
remove: true
}))
.pipe(gulp.dest(path.dest.css));
});或者你们有考拉编译器啊或者其他的都行，能编译就好。
生成的部分结果展示如下：
.m-none{margin:0 !important}.m-auto{margin:auto !important}.m-ii{margin:initial !important}.m-ih{margin:inherit !important}.m-xxs{margin:2px !important}.m-xs{margin:5px !important}.m-sm{margin:10px !important}.m{margin:15px !important}.m-md{margin:20px !important}.m-lg{margin:30px !important}.m-xl{margin:40px !important}.m-xxl{margin:50px !important}.m-n-xxs{margin:-2px !important}.m-n-xs{margin:-5px !important}.m-n-sm{margin:-10px !important}.m-n{margin:-15px !important}.m-n-md{margin:20px !important}.m-n-lg{margin:30px !important}.m-n-xl{margin:-40px !important}.m-n-xxl{margin:-50px !important}.m-v-none{margin-top:0 !important;margin-bottom:0 !important}.m-v-auto{margin-top:auto !important;margin-bottom:auto !important}.m-v-ii{margin-top:initial !important;margin-bottom:initial !important}.m-v-ih{margin-top:inherit !important;margin-bottom:inherit !important}.m-v-xxs{margin-top:2px !important;margin-bottom:2px !important}.m-v-xs{margin-top:5px !important;margin-bottom:5px !important}.m-v-sm{margin-top:10px !important;margin-bottom:10px !important}.m-v{margin-top:15px !important;margin-bottom:15px !important}.m-v-md{margin-top:20px !important;margin-bottom:20px !important}.m-v-lg{margin-top:30px !important;margin-bottom:30px !important}.m-v-xl{margin-top:40px !important;margin-bottom:40px !important}具体的结果等你自己编译一下看看就好啦。
当然有的小伙伴一定嫌麻烦，别急，我这都给你准备好了，编译好的结果放送给大家！
需要使用的小伙伴们直接在HTML代码中引入就好啦！
<link rel="stylesheet" href="http://res.cuiqingcai.com/css/pm.css"> <link rel="stylesheet" href="http://res.cuiqingcai.com/css/pm.min.css">
本文介绍了使用Sass自定义边距样式的流程，希望对大家有帮助！
转载请注明：静觅 » 利用Sass自动生成padding和margin边距样式