投稿    登录
  博主录制的Python3爬虫视频教程已发布!详情请戳Python3爬虫视频教程!希望大家支持!非常感谢!

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

HTML 崔庆才 1140浏览 1评论

需求分析

有需求才有动力!

写CSS的时候,你经常会遇到要设置一个小边距,比如设置:

所有内边距10px,外左边距20px,内右边距0,上下内边距50px,外左右边距自动….

而你是不是又不想自己单独为它们定义一个class,然后把padding, margin之类的写进去?

举例如下:

现在我有两个p标签,我想让这两个p标签中间相隔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是自动边距。

怎样?有了这些定义,我们是不是就能非常方便地设置边距样式了?刚才的边距怎样解决?很简单,只需要

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

编写Sass

这么多组合呢?写CSS不累死了?检查也不好检查。

怎么办?上Sass!

首先我们先定义一层映射,边距映射:

这里定义了所有的边距和它的简称。

然后我们尝试写一下padding的函数,遍历一下:

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

这样我们就生成了所有padding边距的设置。

好接下来设置下水平和垂直边距吧,这个就需要两句话了,比如设置水平你得写padding-left 和 padding-right。

有的小伙伴说了,可以直接写一个啊,比如 padding: 0 20px 就可以,不过这样你同时设置了上下边距。即便上下边距我们设置成inherit或者什么其他的,那也多多少少在某种情况下产生影响。

所以这里我们直接分开,而且就算不分开,你之前的映射就要修改,还是麻烦的。

所以这里定义如下:

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

如此一来,padding的就写好了!

那么margin的怎么办?很简单,再加一层循环,最终代码如下:

如此一来,Sass便成功生成了。

编译

写完了那自然要编译一下咯,废话不多说上gulp。

或者你们有考拉编译器啊或者其他的都行,能编译就好。

生成的部分结果展示如下:

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

资源下载

当然有的小伙伴一定嫌麻烦,别急,我这都给你准备好了,编译好的结果放送给大家!

pm.css pm.min.css

需要使用的小伙伴们直接在HTML代码中引入就好啦!

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

转载请注明:静觅 » 利用Sass自动生成padding和margin边距样式

喜欢 (4)or分享 (0)

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的

想结交更多的朋友吗?

来进击的Coder瞧瞧吧

进击的Coder

QQ群号 99350970 立即加入

进击的Coder灌水太多?

这里是纯粹的技术领地

激进的Coder

QQ群号 627725766 立即加入

想找人聊天解闷?想要学习干货?

微信公众号进击的Coder为你打造

进击的Coder

微信公众号 扫一扫关注