0%

利用Sass自动生成padding和margin边距样式

需求分析

有需求才有动力! 写CSS的时候,你经常会遇到要设置一个小边距,比如设置: 所有内边距10px,外左边距20px,内右边距0,上下内边距50px,外左右边距自动…. 而你是不是又不想自己单独为它们定义一个class,然后把padding, margin之类的写进去? 举例如下: 现在我有两个p标签,我想让这两个p标签中间相隔10px,那是不是需要?

1
2
<p style="margin-bottom:10px">Hello</p>
<p>World</p>

又或者

1
2
3
4
5
6
<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是自动边距。 怎样?有了这些定义,我们是不是就能非常方便地设置边距样式了?刚才的边距怎样解决?很简单,只需要

1
2
<p class="m-b-sm">Hello</p>
<p>World</p>

如果一个网页里有很多样式,那只需要把整个样式文件引入,自由地添加class就好了。

编写Sass

这么多组合呢?写CSS不累死了?检查也不好检查。 怎么办?上Sass! 首先我们先定义一层映射,边距映射:

1
2
$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的函数,遍历一下:

1
2
3
4
5
@each $style, $padding in $map {
.p-#{$style} {
padding: $padding !important;
}
}

这,那空的咋办? 不能留个下划线啊。判断一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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或者什么其他的,那也多多少少在某种情况下产生影响。 所以这里我们直接分开,而且就算不分开,你之前的映射就要修改,还是麻烦的。 所以这里定义如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@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;
}
}

那最后,单边距的定义如下,我们给它加个循环:

1
2
3
4
5
6
7
8
9
$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的怎么办?很简单,再加一层循环,最终代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@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。

1
2
3
4
5
6
7
8
9
10
11
12
13
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));
});

或者你们有考拉编译器啊或者其他的都行,能编译就好。 生成的部分结果展示如下:

1
.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}

具体的结果等你自己编译一下看看就好啦。

资源下载

当然有的小伙伴一定嫌麻烦,别急,我这都给你准备好了,编译好的结果放送给大家! pm.css pm.min.css 需要使用的小伙伴们直接在HTML代码中引入就好啦!

1
2
<link rel="stylesheet" href="http://res.cuiqingcai.com/css/pm.css">
<link rel="stylesheet" href="http://res.cuiqingcai.com/css/pm.min.css">

本文介绍了使用Sass自定义边距样式的流程,希望对大家有帮助!