如何写好css系列之button
现代前端行业的发展，如果你在css的时候，还没有利用一些预编译工具，是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要，因为基础有boostrap，组件库有：easyui，elementui，iview，ionic等等。但我个人练习自己如何写好一个css框架，对自己前端能力的提升还是有帮助的。所以本人以此为目标和动力。展开了这个系列的博客之旅。开篇以button为起点。
一、与美术交流获取得这些信息
1. 按钮状态：普通状态、鼠标悬停、选中状态、禁用状态
2. 按钮形状：常用形状（有背景），简单形状（无背景），图标按钮、多文字按钮、fullwidth按钮
3. 其他：按钮可以分组、a标签与button标签表现要一致
二、已实现的示例效果展示
三、实现具体细节阐述
本次使用sass作用css的预编译器，代码结构如下：
说明：
1. _button.scss：实现按钮的基本形状和状态；
2. _button.plain.scss：实现简单迎按钮的形状和行为，其中还包含了去掉边框的样式
3. _button.onlyIcon.scss：图标按钮的实现，在这里申明：图标都是使用的font-awesome。
4. _button.link.scss：对按钮扩充为a标签也能支持
5. _button.group.scss：按钮分组
6. _variable.scss：相关变量定义文件
7. main.scss：编译文件入口。其他文件夹是表明后期会实现的模块。
3.1. button的实现代码解析
代码分为两部分，一部分为html结构，一部分为css代码
1. html结构
<button class="f-btn f-btn-primary-norm multi plain noborder">
<span class="fa fa-address-book"></span><span>有个图标</span>
</button>2. sass代码
.f-btn{
border-radius: $radius-width-base;
font-family: $font-family;
cursor: pointer;
border: 1px solid transparent;
outline: 0;
padding: $btn-padding-norm;
font-size: $font-size;
line-height: $line-height;
vertical-align: middle;
text-align: center;
transition: background-color .3s;
width: 58px;
white-space: nowrap;
@each $class, $bgcolor, $color in $colors {
&.f-btn-#{$class}{
background-color: $bgcolor;
color: $color;
&:hover, &:active{
background-color: darken($bgcolor, 6%);
}
&.disabled, &:disabled{
@include opacity(.65);
}
}
}
> .fa{
margin-right: 4px;
}
&.max{
width: 100%;
display: block;
+ .max{
margin-top: 20px;
}
}
&.multi{
width: auto;
padding: $btn-padding-multi;
}
}从html结构可以看出按钮可以包含两部分（两个span），一个图标，一个文字。首先利用button来修饰按钮的整体形状和状态等信息，然后再将图标和文字span进一步修改即可。
从sass代码中可以看出，我循环了一个colors数组，这里就是为了创建多种不同状态的按钮，如：正常、警告、提示等，因为他们的背景或字体颜色是有区别的。
3.2. 其他
本人在阐述此篇博客的时候，对css前端框架整体理解还没达到高级水平。所以在文章逻辑结构和语言的时候存在诸多问题，希望各位朋友、前辈指教。源码下载