semantic ui其实很反人类，我已经改不下去了，又臭又长的名称，逆天的十六栏布局，复杂的响应式写法。
抱歉，容我烦躁之余吐槽一下。
分类： HTML&CSS
越深入就越沉迷
SCSS的用法很灵活，多种多样，越是深入学习就越沉迷其中，迫不及待的想要得到更多。
向bootstrap学习，以SCSS逐步改造自己的框架。
SCSS，混合宏
混合宏的逻辑有点复杂，用法也挺多的，但是，真的很方便，很实用。
看了相关的文档，在自己的框架中，还是主要参考了bootstrap4的混合宏写法。
bootstrap4里面的混合宏层层关联，互相嵌套，各种变量，各种函数，需要全部理清来龙去脉才能知道具体怎么作用的。
主要是用来生成颜色，根据条件，生成不同颜色的按钮，或者其他场景的应用。
总之，还是要去理解清楚。
目前，大概的思路是清楚了，就是具体要多实践。
关于Sass的工作成果
一、创建了一个color变量库；
除基本色，另外包含19个色系，每个主色又包含约15种颜色渐变。
另外又覆盖了一百多个有名字的颜色。
并且，每个色系都增加maps函数，以便需要时调用。
同时针对常用社交icon，也预设了主色。
所有颜色值，均以十六进制颜色表达。
二、创建了一个class变量库
主要是css的属性进行预设变量。
涵盖几乎所有可能用到的属性。
以上，这两个变量库，理论上适用于任何使用Sass开发者。
后续按需增补。
4.0的重构工作，从变量名称开始
主要是针对颜色及属性名的变量及赋值。
赋予变量，当然是为了方便维护及以后的版本迭代更新。
以颜色为例，既有名称变量，也有色值的变量。
重新规划变量名，以更直观的描述，把两者区分开。
完成3.0的Sass重构，接着……
划重点，论工作先后顺序的重要性！
之前考虑重构框架时，思索再三，还是决定先把3.0的重构一下，关键是旧版基本成型，而且已经使用在生产环境中。
这两天，再准备重构4.0的时候，我才发现，我的热情和精力可能被消耗殆尽了，已经很难平静的去做重构工作了。
这是因为，4.0版本虽是大版本的迭代，但还是蜕变于3.0版，绝大部分内容相同，只是命名和结构不同。
无奈，只好先搁置一段时间吧。
以后，尽量的权衡好工作的优先级再行动。
SCSS自动编译工具
windows下，使用koala实现Sass自动编译。
macOS下，使用codekit实现。
使用命令行命令：compass watch实现监听目录更改，自动编译。
但是，在windows下，大部分时间，监听都不是即时的，需要手动Ctrl+C，才会自动编译，而这个快捷键偏偏又是停止监听的快捷键。
尽管矛盾，但是，windows下的compass命令需要使用关闭的指令来威胁一下才会运行。
首选，还是推荐使用工具吧，koala是免费的，虽然没有codekit那么复杂的功能，但是简洁明了，足够用了。
以SCSS重构css framework
终于开始了，是的，心中默念了许久了，一直，迟迟不肯下手，这次算是终于下定决心去做了。
基本上，就在原基础上优化，最多的改变应该是对于颜色，除了少数不变的值，基本都给了变量名。
另外，就是嵌套，SCSS的结构看起来是简洁了很多。
输出的时候，暂时不压缩代码，毕竟，初次使用，保持格式化代码，有利于查漏补缺。
需要说明的是，增加变量，看似增加了工作量，但是，对于后期维护，却是节约了无非预估的时间。
高效的写代码……
其实很简单，代码补全，错误提示，自动编译、压缩，代码缩进（格式化）及保留适当的空行。
代码补全基本已经是现代编辑器必备的基本功能了。另外，快速的写代码，还需要emmet来实现。
自动编辑、压缩，这个基本靠构建工具实现，各种打包软件。
SCSS+Compass是最佳组合之一。
关于错误提示，这个就是纯粹的编辑器内置功能了。
圈内人大概都知道webstorm。
代码缩进，代码格式化，这个非常非常非常重要。
简述css的vertical-align属性
直译，就是垂直居中。
通常，应用于行内元素，图片、文字、图标等。vertical-align属性，我的理解就是相对于某个元素对比而言的。
w3c有一段相关信息如下：
| Value: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
| Initial: | baseline |
| Applies to: | inline-level and ‘table-cell’ elements |
| Inherited: | no |
| Percentages: | refer to the ‘line-height’ of the element itself |
| Media: | visual |
| Computed value: | for <percentage> and <length> the absolute length, otherwise as specified |
可应用范围可以理解为，在行内和表格内的元素。
图片，按钮，文字和单元格 都可以使用vertical-align属性。
css中的!important及版本迭代的前因后果
css的!important该如何使用，何时使用，坦白说，时至今日，我也没有很深刻的认识，这个提升css属性权重的写法，在关键时候很有用，不过，需要明白的是，这个权重的提升，事实上是覆盖了其他的同名写法，提升了权限；往往，你需要提权的地方，可能只是一个唯一的，或者临时需要用到的地方。
所以，要慎重使用。
在2.0版本的框架中，我肆无忌惮的使用了!important，只是为了某些情况下的偷懒。
在2.0版本的实践中，我发现了严重的问题，往往因为这些大范围的提权的写法，导致各种场景的冲突，这说明了，css的写法及应用范围，前后排序存在严重的逻辑问题。
总的来说，3.0版本的诞生，除了优化class命名，更多的，还是修正!important的滥用。
很好，3.0版本在实践中，逐步完善了很多细节，完全可以投入到生产环境中了。虽然修正或者修改了前版的class命名冗长的问题，但，还是觉得不够简洁。再加上，忽略了flex布局，于是，决定衍生4.0版本。
4.0版本，目前处于进行时态，对于!important的使用，暂时是少于3.0版本。至少，证明了我这套css框架已经趋于成熟了。
最后，总结一下，关于!important，并非是完全不用，只是，尽可能的避免使用，一旦使用了，要保证用法的唯一性，独立性。至少不会影响后期维护。
Bootstrap框架用太多了……
Bootstrap框架用太多了……
昨天按照框架的思路自己按百分比写了个两栏布局，但是没有正确的分布左右，都浮动到左侧去了。
今天突然想到，我没有写清除浮动。
bootstrap用多了，清除浮动一直都是框架写好的，自己写就忽略这点。
.box {
display: table;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box .left {
width: 30%;
float: left;
}
.box .right {
width: 70%;
float: left;
}
最后
.clearfix {
clear: both;
}
CSS之flex
先标记一下，这个需要整理一下才好表述，平时用的不多。但是在特定需求下，又比较实用。
4月30日更新：
懒得去写了，组织了一下语言，查了相关资料，还是标记一下大神的博文吧，需要时直接阅读：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
CSS之column-count
这是个css3的属性，语法很简单，对类似瀑布流的分栏效果很有用，但某些标签会被截断。
例如容器box分了4栏，里面包含了若干个ul>li，li就会被截断，应该显示在第一栏的，尾端的一部分可能因为内容多少的原因换到第二栏显示了。
解决方法也简单，给ul写个display：inline-block;
当然，可能还有其他图文的排列，具体要看情况决定，更多关于column的详解，可以参考：https://segmentfault.com/a/1190000003748570
CSS之calc()再续……
应用场景：
首先，响应式设计。
宽100%的情况下，例如一整行文字，文字属性为超长溢出隐藏显示三点省略号，这个场景就要求定义这行文本的宽度，绝对值或百分比都可以。另外，需要在右侧预留点空间放一个小图标或者图片。
如果按百分比，给文本一个百分比，右侧图标或图片一个百分比，在不同设备下，都有单独去设置不同的百分比。
用calc()这个属性，可以完美解决以上问题。
右侧的图片或者图标，基本是固定大小不会改变的，例如图标宽50像素，图标与文本间预留10像素间隙，所以，只要给左侧文本的宽的属性写上：
width: calc(100% - 60px);
这样，无论在任何设备宽度下，这一整行文本始终保持最大宽，而且不影响右侧图标的位置。