【less】混合

混合，可以说是 less 里最直接的偷懒神器~

比如，要写各浏览器前缀，要经常用到的垂直和水平的居中等。

都可以预先设置好，哪里用到就直接调用~

本节目录

混合的基本用法

传参

默认参

由于屏幕尺寸关系，最好把代码复制到编辑器查看~

【混合的基本用法】

以兼容性写法为例

转换后的CSS

可以看到，在 less 里，.div1、.div2、.div3都调用了（.border-radius;），在 css 里就转换出一大堆写好兼容性的属性。

因为 （.border-radius） 是一早就设置好的。

同时，可以看到在 less 里用 “//” 的备注，在 css 里是不会被转化输出的。因为 css 不认识这种备注方式。

以上就是 less 混合的基本用法。

【传参】

很多时候，我们都不希望属性的值是写死的。比如前面的例子中，我们希望能偷懒，但同时又希望每次的偷懒都能灵活点。这时就出现了传参的写法。

less代码

转换后的CSS

可以因为 .div1 和 .div2 传入的值不一样，所以转换后的值也不一样。

在 less 中，.border-radius(@radius) 的意思是：

定义一个 .border-radius 公用类，后面加一个括号。括号里面用 “@” 来定义一个变量。通过变量来接收传进来的参数。

在 .div1 和 .div2 中，调用.border-radius() ，并在括号里传入所需的值。

这就是传参的写法。

最后需要注意的是：传参这种写法，如果在调用时没有传参，编译成CSS时将会报错

【默认参】

为了更懒，于是出现了默认参的写法。关于默认参，在JS里面也很常用到。看看例子就懂。

转换后的CSS

主要看 less 部分。

.div1 直接调用，没有传参，所以用了 .display-flex() 里设置的默认参。

.div2 按顺序传参，会覆盖 .display-flex() 的默认值

.div3 只修改了 .display-flex() 里的其中一个参数，所以要指定变量名，有针对性的修改。

这里写的默认方法，就是水平和垂直的居中布局~~~