本期我们将添加按钮图标和常用的附加类。附加类是指修改文字颜色、背景颜色、边框等。修改src/button.sass，在图标和文字之间增加一些间距。//与.btn兼容的图标i.icondisplay:inline-blockwidth:.9rem&.rightpadding-left:.5rem&.leftpadding-right:.3rem&.largei.icon&.rightpadding-left:.7rem&.leftpadding-right:1.3rem然后添加图标，这里我们直接使用ionic提供的图标。在html导入文档可以在这里找到https://ionicons.com/usage，我们这样使用它。删除文章删除文章添加颜色辅助类定义2个数组，从数组取元素时使用第n个方法，通过可以构造一个区间，length方法可以得到数组的长度。其实这里还是用dict字典比较好，但是为了让大家学到更多的知识点，所以使用了@for循环的方式。text修改文字颜色，bg修改背景颜色。$颜色：$dark,$light,$gray,$blue,$deep-blue,$red,$yellow,$green$names:'dark','light','gray','blue','deep-blue','red','yellow','green'@for$i从1到length($colors).text-#{nth($names,$i)}color:nth($colors,$i).bg-#{nth($names,$i)}background:nth($colors,$i)添加clearfloating辅助类=开头的是mixin，可以是混合对象，代表可重用函数，它可以接受参数，这里因为没有参数，所以可以省略。=clearfix&::aftercontent:''display:tableclear:both.clearfix+clearfix还有一个@extend继承。%message-sharedborder:1pxsolid#cccpadding:10pxcolor:#333.message@extend%message-shared.success@extend%message-sharedborder-color:green会被编译成，表示选择器的复用,多个选择器应用相同的样式。.message,.success{border:1pxsolid#cccccc;填充：10px；color:#333;}.success{border-color:green;}用于文本对齐、文本大小、省略号等的文本辅助。.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:ellipsisblockspacingauxiliaryclassinnermarginandoutermargin.p1rempadding:1rem.m1remmargin:1rem.p51rempadding:.5rem1rem.m51remmargin:.5rem1rem居中辅助类一种是基于绝对居中，一种是基于flex居中，flex居中的样式必须放在父类上。.ab-centerposition:absolutetop:50%left:50%transform:translate(-50%,-50%).fx-centerdisplay:flexalign-items:centerjustify-content:center最后的结果确实是一个彩虹。最后说一下为什么要抽取这些辅助类？一是因为它很常用，二是因为它是添加而不是抽取的，而且使用的是单一的类。虽然这是非常语义化的并且将结构和样式分开，但它会导致很多样式。要么多css，要么多htmlclasses，两者总要权衡取舍，我们只能努力寻找平衡点。所有代码都已完成。查看https://github.com/MiYogurt/N...获取源代码。扫描下方二维码，关注微信公众号，每周免费获取精品前端小班连载，每周更新，你还在等什么？赶紧关注起来。
