开发一个自己的CSS框架（二）

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

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

// 图标兼容 .btni.icondisplay: inline-blockwidth: .9rem&.rightpadding-left: .5rem&.leftpadding-right: .3rem&.large i.icon&.rightpadding-left: .7rem&.leftpadding-right: 1.3rem

然后添加图标&＃xff0c;这里我们直接使用 ionic 提供的图标。

在 html 导入

在这里可以找到文档 https://ionicons.com/usage &＃xff0c;然后我们像这样去使用它。

删除文章删除文章

添加颜色辅助类

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

$colors: $dark, $light, $gray, $blue, $deep-blue, $red, $yellow, $green $names: &＃39;dark&＃39;, &＃39;light&＃39;, &＃39;gray&＃39;, &＃39;blue&＃39;, &＃39;deep-blue&＃39;, &＃39;red&＃39;, &＃39;yellow&＃39;, &＃39;green&＃39;&＃64;for $i from 1 through length($colors).text-#{nth($names, $i)}color: nth($colors, $i).bg-#{nth($names, $i)}background: nth($colors, $i)

添加清浮动辅助类

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

&＃61;clearfix&::aftercontent: &＃39; &＃39;display: tableclear: both.clearfix&＃43;clearfix

还有另外一种 &＃64;extend 继承。

%message-sharedborder: 1px solid #cccpadding: 10pxcolor: #333.message&＃64;extend %message-shared.success&＃64;extend %message-sharedborder-color: green

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

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

文字辅助类

文字对齐&＃xff0c;文字大小&＃xff0c;超出省略等等。

.text-righttext-aligh: right.text-lefttext-align: left.f8font-size: .8rem .f9font-size: .9rem .f1font-size: 1rem .f12font-size: 1.2rem .f14font-size: 1.4rem.text-ellipsiswhite-space: nowrapoverflow: hiddentext-overflow: ellipsis