less初体验:
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq67EE82E470A6C190C8D186562B6C7B39/816d28c7f8b3466fa4b4b8330dfa14d1/clipboard.png)
![](https://images2015.cnblogs.com/blog/1119605/201707/1119605-20170722163942871-1561156944.png)
mixin : 混合,将一堆属性从一个规则集到另外一个规则集:
(如果有公用的样式,可以做提取:)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq67EE82E470A6C190C8D186562B6C7B39/f9e3a6330ad24e90889ba97d1f09f281/clipboard.png)
![](https://images2015.cnblogs.com/blog/1119605/201707/1119605-20170722164035403-201228913.png)
清除浮动经典代码:
![](https://images2015.cnblogs.com/blog/1119605/201707/1119605-20170722164059356-597759779.png)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq67EE82E470A6C190C8D186562B6C7B39/fdf77184b2d84ea2b33ee5e6b0ca87a8/clipboard.png)
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
操作:
算术操作 +, -, *, /可以操作任何数量,颜色或变量。
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq67EE82E470A6C190C8D186562B6C7B39/35ef07ec8d2f4ce199d5eeda4498e070/clipboard.png)
![](https://images2015.cnblogs.com/blog/1119605/201707/1119605-20170722164128512-1227611383.png)
作用域:(定义的变量同样有着局部变量和全局变量之分)
![](https://images2015.cnblogs.com/blog/1119605/201707/1119605-20170722164148106-101395581.png)
变量:
相同的值,有几十个的情况,一旦修改比较麻烦,所以可以使用变量来更容易维护;
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq67EE82E470A6C190C8D186562B6C7B39/a1ef5b5a5882427eb0eaa7295a6f790d/clipboard.png)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq67EE82E470A6C190C8D186562B6C7B39/75fc77480f2545f3be9d7f2de7c82556/clipboard.png)
![](https://images2015.cnblogs.com/blog/1119605/201707/1119605-20170722164225793-1923596678.png)
拓展:
扩展是一个合并减少伪类选择器是放在与匹配的引用。
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq67EE82E470A6C190C8D186562B6C7B39/10988e0f34cf4ae1ad356a88e33f95c1/clipboard.png)
![](https://images2015.cnblogs.com/blog/1119605/201707/1119605-20170722164259371-463753112.png)
使用拓展添加伪类:
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq67EE82E470A6C190C8D186562B6C7B39/283ede4bb67440f9a01578d1a09581ce/clipboard.png)
![](https://images2015.cnblogs.com/blog/1119605/201707/1119605-20170722164315043-665731498.png)
添加伪类其他方法:(利用父级选择器)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq67EE82E470A6C190C8D186562B6C7B39/d79533b1bcda43eab0597a57709e1398/clipboard.png)
![](https://images2015.cnblogs.com/blog/1119605/201707/1119605-20170722164331903-2017098881.png)
函数:
使用函数能减低大量的CSS代码力量:
![](https://images2015.cnblogs.com/blog/1119605/201707/1119605-20170722164353434-580036893.png)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq67EE82E470A6C190C8D186562B6C7B39/d76ca7b3b4d54b329d347a98630385af/clipboard.png)
还可以这样:
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq67EE82E470A6C190C8D186562B6C7B39/5278bdcd6a6746ac90d5bc708f665c33/clipboard.png)
![](https://images2015.cnblogs.com/blog/1119605/201707/1119605-20170722164412700-1854958999.png)