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

举报
崔庆才丨静觅 发表于 2021/05/22 02:01:32 2021/05/22
【摘要】 需求分析 有需求才有动力！ 写 CSS 的时候，你经常会遇到要设置一个小边距，比如设置： 所有内边距 10px，外左边距 20px，内右边距 0，上下内边距 50px，外左右边距自动…. 而你是不是又不想自己单独为它们定义一个 class，然后把 padding, margin 之类的写进去？ 举例如下： 现在我有两个 p 标签，我想让这两个 p 标签中间相隔 10px，那...

需求分析

有需求才有动力！ 写 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 自定义边距样式的流程，希望对大家有帮助！

文章来源: cuiqingcai.com，作者：崔庆才，版权归原作者所有，如需转载，请联系作者。

原文链接：cuiqingcai.com/3276.html

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Sass
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入