Lazy loaded image
前端
Less带多个参数的混合
字数 997阅读时长 3 分钟
2020-1-13
2025-4-4
type
status
date
slug
summary
tags
category
icon
password
上次编辑时间
Apr 4, 2025 02:48 PM

带多个参数的混合

什么是多参数:

  1. 一个组合可以带多个参数,参数之间可以用分号或者逗号分割。
  1. 但是推荐使用分号分割,因为逗号符号有两个意思。它可以理解为mixins参数分隔符或者css列表分隔符。

官方说明

  1. 两个参数,并且每个参数都是逗号分隔的列表:.name(1,2,3;something.ele)
  1. 三个参数,并且每个参数都包含一个数字:.name(1,2,2)
  1. 使用伪造的分号创建mixin,调用的时候参数包含一个逗号分割的css列表:.name(1,2,3;)
  1. 逗号分隔默认值:.name(@param1:red,blue)
使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时,LESS会应用到所有可以应用的混合上

实例

编译后的css如下:
如果传参的括号里面全部都是以“,”分割,那么会依次传给各个参数值,如果传参的括号里面既有“,”又有“;”那么,会把“;”前面的看作一个整体,传给一个参数值

定义多个具有相同名称和参数数量的混合:

定义多个具有相同名称和参数数量的mixins是合法的。Less会使用它可以应用的属性。如果使用mixin的时候只带一个参数,比如.mixin(green),这个属性会导致所有的mixin都会强制使用这个明确的参数。实例如下:
编译后的css如下:

命名参数

引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都以用过它的名称来使用,这样就不必按照任意特定的顺序来使用参数

实例

其编译后的css文件如下:

@arguments变量

@arguments代表所有的可变参数

注意:

  1. @arguments代表所有可变参数,参数的先后顺序就是你的()括号内的参数的先后顺序
  1. 在使用的赋值,值的位置和个数也是一一对应的,只有一个值,把值赋值给第一个,两个值,赋值给第一个和第二个,三个值赋值给第三个……以此类推,但是需要注意的是假如我想给第一个和第三个赋值,你不能写(值1,,值3),必须把原来的默认值写上去!

实例

其编译后的css文件为:

匹配模式

传值的时候定义一个字符,在使用的时候使用哪个字符,就调用那天规则。

实例

编译后css如下:

混合的返回值

在使用混合时,有时会用到一些运算,这时就有返回值。使用实例如下:
编译后的css如下:
上一篇
基于nodejs做的网页爬虫小项目
下一篇
input标签文件选择限制文件类型方法——MIME简介

评论
Loading...