less语法之--混合

我擦，好安静，公司现在只剩下我一个人了，哈哈，可以尽情的敲击键盘了。

下面是关于less语法之混合，文章中有的变量名在本篇中找不到，是因为我定义在上一篇文章中，写的太长了，索性就将文章一块一块的写，这样标题看着比较清晰，如果看不太明白的话，可以按照顺序来看一看，上下联系一下就可以了。

关于less语法，我都写在同一个文集中，可以看看《less语法》文集；

关于混合，分一下三种情况：

调用的时候存在的区别：

设置一个.box的 样式1：

设置一个.border的 样式2：

怎么使用混合使样式1也具有样式2的样式？

编译结果：

同理，如果定义一个.box2的样式是在.box的基础上追加新样式，混合写法如下：

注意： 如果不设置默认值的话，必须给它传参，不然是会报错的！！！

我们可以给它传递一个变量做参数，这样我们可以动态的变化这个值，如下：

举个栗子吧：

编译结果：

这里我们给它传递变量做参数的同时设置默认值，如果有参使用参数，无参使用默认值代替，如下：

举个栗子吧：

编译结果：

提示：

再来举个混合的栗子吧：

编译结果：

前端开发用less或者sass的情况如下：项目足够大，起码几十张页面，有公共的UI组件，组件或者页面上有相似的拼装属性的方法(可以写成mixin)，组件或者样式拼装上存在继承关系，或者有theme的需求。其实本身纯粹的CSS编写也有很多现成的方法论(OOCSS,SMACSS,BEM,DRYCSS)实现复杂度的管理，但是预编译器可以提供一些语法糖简化(包括你可以使用PostCSS)，同时迁移编程的经验更好管理复杂度。其实就是习惯和效率的问题，工具是为了提高效率存在的，如果不习惯，大家有统一规范的共识，用纯粹CSS也能写出组织良好的CSS。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com