从做一个计算器出发学习CSS
2018-10-02 本文已影响12人
矢口不知
认识是从实践中来，到实践中去，在实践中接受检验。
计算器是网页初学者经常做的了，我的这个例子用Vue来控制面板数据和计算操作，用table和v-for做界面，用CSS控制布局和样式。
做计算器的过程中更加了解了如何正确地使用CSS，因此记录一下，希望能多一些这种经验，总结出自己的学习模式。
Vue中使用动态Class
<table id="calc_table">
<tr v-for="row in panel" class="calc_row">
<template v-for="btn in row" >
<td :class="[
{ calc_btn: true },
{ calc_btn_equal: btn==='=' },
{ calc_btn_number: btn!=='=' },
]" @click="input(btn)"> {{ btn }} </td>
</template>
</tr>
</table>
使用:class可以给元素指定一个ClassObject或ClassObject的数组（以下统称ClassObject），通过这个ClassObject可以“算”出该元素有哪些class。
为什么要有动态class呢？因为静态class实在太不灵活了。数字按钮要加一个class，=按钮要加另一个，log、sin这些按钮又要加另一个。不仅写起来冗长，而且不能用v-for这种统一的方式来实现了。
换句话说，ClassObject是元素的状态和它的class之间的关系的一个抽象，形式地说，ClassObject是从元素状态到class的一个映射。
class = ClassObject(state), class ⊂ CSS.allClasses, state ⊂ Vue.data
而Vue完成的工作就是维护所有的状态（也就是data），当状态变化时重新计算class并同步到相应元素上。
参考：https://cn.vuejs.org/v2/guide/class-and-style.html
通过Chrome的检查功能学习别人家的CSS
“我前天亲眼见你偷了谷家的代码，吊着打。”
“程序员的事，能算偷吗？”
直接Google计算器出来的在线计算器样式就蛮好看的，按钮有渐变效果，这是我不会的。比起一章一章的啃文档，看一个感兴趣的例子源码学起来更快。于是乎右键 -> 检查。
chrome_inspect.png
在右边可以直接看到对应的CSS样式，filter中可以选择状态进一步筛选。
chrome_inspect_css.png
参考：Get Started With Viewing And Changing CSS
CSS变量
“偷”了别人家的代码，界面是好看了，比较不幸的是代码变丑了：
.calc_btn {
width: 50px;
height: 50px;
text-align: center;
}
.calc_btn_number {
background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
background-color: #f5f5f5;
background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#f5f5f5,EndColorStr=#f1f1f1);
border: 1px solid #dedede;
color: #444;
}
.calc_btn_equal {
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4d90fe,EndColorStr=#4787ed);
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
background-color: #4d90fe;
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ed;
color: #fefefe;
}
.calc_btn_number:hover {
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#f8f8f8,EndColorStr=#f1f1f1);
background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
background-color: #f8f8f8;
background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
border: 1px solid #c6c6c6;
color: #222;
}
.calc_btn_equal:hover {
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4d90fe,EndColorStr=#357ae8);
background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));
background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
background-color: #4d90fe;
background-image: linear-gradient(top,#4d90fe,#357ae8);
border: 1px solid #2f5bb7;
color: #fefefe;
}
由于兼容性的原因，设置了很多个background-image，而且除了两个渐变颜色不同，每个元素的内容几乎是一样的。我们的原则是“不要有重复代码”，这还能忍吗？
不能忍好！
CSS变量了解一下！
知道有这个东西后，看看文档，改写代码并不困难。关键是要有去掉重复代码的想法。
.calc_btn {
width: 50px;
height: 50px;
text-align: center;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
background-image: -moz-linear-gradient(top,var(--start-color),var(--end-color));
background-image: -ms-linear-gradient(top,var(--start-color),var(--end-color));
background-image: -o-linear-gradient(top,var(--start-color),var(--end-color));
background-image: -webkit-gradient(linear,left top,left bottom,from(var(--start-color)),to(var(--end-color)));
background-image: -webkit-linear-gradient(top,var(--start-color),var(--end-color));
background-image: linear-gradient(top,var(--start-color),var(--end-color));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=var(--start-color),EndColorStr=var(--end-color));
background-color: var(--start-color);
border: 1px solid var(--border-color);
color: var(--text-color);
}
.calc_btn_number {
--start-color: #f5f5f5;
--end-color: #f1f1f1;
--border-color: #dedede;
--text-color: #444;
}
.calc_btn_equal {
--start-color: #4d90fe;
--end-color: #4787ed;
--border-color: #3079ed;
--text-color: #fefefe;
}
.calc_btn_number:hover {
--start-color: #f8f8f8;
--end-color: #f1f1f1;
--border-color: #c6c6c6;
--text-color: #222;
}
.calc_btn_equal:hover {
--start-color: #4d90fe;
--end-color: #357ae8;
--border-color: #c6c6c6;
--text-color: #222;
}
