【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() 里的其中一个参数,所以要指定变量名,有针对性的修改。

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190101G00CWO00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券