这一期我们来添加按钮的图标，与常用的附加类，附加类指的是修改文字颜色、背景颜色，边框等等。

修改 src/button.sass 给图标与文字之间添加一些间距。

// 图标兼容
.btn
i.icon
display: inline-block
width: .9rem
&.right
padding-left: .5rem
&.left
padding-right: .3rem
&.large i.icon
&.right
padding-left: .7rem
&.left
padding-right: 1.3rem

然后添加图标，这里我们直接使用 ionic 提供的图标。

在 html 导入

<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">

在这里可以找到文档 ionicons.com/usage ，然后我们像这样去使用它。

<a href="#" class="btn red large"><i class="icon ion-md-close left"></i> 删除文章</a>
<a href="#" class="btn red large">删除文章 <i class="icon ion-md-close right"></i></a>

添加颜色辅助类

定义了 2个数组，从数组里面取元素的时候用 nth 方法，through 可以构造一个区间，length 方法可以取到数组长度，其实这里用 dict 字典会更好，只不过为了让大家学到更多的知识点，所以用了 @for 循环的方式。text 修改的是文字颜色，bg 修改的是背景颜色。

$colors: $dark, $light, $gray, $blue, $deep-blue, $red, $yellow, $green
$names: dark, light, gray, blue, deep-blue, red, yellow, green

@for $i from 1 through length($colors)
.text-#{nth($names, $i)}
color: nth($colors, $i)

.bg-#{nth($names, $i)}
background: nth($colors, $i)

添加清浮动辅助类

以 = 开头的是一段 mixin，即可混合对象，它表示一个可复用的一个函数，它可以接受参数，这里因为没有参数，所以可以省略。

=clearfix
&::after
content:
display: table
clear: both

.clearfix
+clearfix

还有另外一种 @extend 继承。

%message-shared
border: 1px solid #ccc
padding: 10px
color: #333

.message
@extend %message-shared

.success
@extend %message-shared
border-color: green

会编译成，这样表示选择器的复用，多个选择器应用同一个样式。

.message, .success {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}

.success {
border-color: green;
}

文字辅助类

文字对齐，文字大小，超出省略等等。

.text-right
text-aligh: right

.text-left
text-align: left

.f8
font-size: .8rem
.f9
font-size: .9rem
.f1
font-size: 1rem
.f12
font-size: 1.2rem
.f14
font-size: 1.4rem

.text-ellipsis
white-space: nowrap
overflow: hidden
text-overflow: ellipsis

区块间隔辅助类

内边距与外边距

.p1rem
padding: 1rem

.m1rem
margin: 1rem

.p51rem
padding: .5rem 1rem

.m51rem
margin: .5rem 1rem

居中辅助类

一个是基于 absolute 居中，一个是基于 flex 居中，flex 居中样式必须放在父类上。

.ab-center
position: absolute
top: 50%
left: 50%
transform: translate(-50%,-50%)

.fx-center
display: flex
align-items: center
justify-content: center

最终结果，果然彩虹。

最后我在说一下为什么要把这些辅助类提取出来？

首先是因为非常的常用，其次，是因为加入不提取出来，使用单独的一个 class ，虽然这样非常的符合语义化，以及结构与样式分离，但是会导致样式非常多。

要么 css 多，要么 html class 多，两著之间总要有一个取舍，我们只能尽量找到一个平衡点。

所有代码都已完成查看 github.com/MiYogurt/Nic 获取源码。

扫描下面二维码，关注微信公众号，每周免费获取精品前端小课连载，每周更新，还在等什么？赶快关注吧。

weixin.qq.com/r/QzkgOKT (二维码自动识别)


推荐阅读：
相关文章