less中的混合
混合的意思:
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
通俗来讲,规则集即指一套代码,一套定义一定规则的代码,比如一套定义样式的代码,就是一个规则集
比如:
这里面的样式就是一个规则集
混合就是把一套规则集用于另一个元素上面
混合类别:
普通混合
不带输出的混合
带参数的混合
带参数并且有默认值的混合
带多个参数的混合
命名参数
匹配模式
arguments变量
普通混合
即直接写一个不影响html中元素的选择器,然后代码体里面写上规则集,然后直接让其他规则集调用
这种方法会使less在编译为css时把不该编译到css中的选择器#diaoyong
也给编译进去
不带输出的混合
在选择器后面加上()
就不会被编译到``css```中了
调用的时候加不加()
都行
带参数的混合
参数就是变量所以,我们就跟函数一样可也设置形参也可向里面传实参,但是注意,咱这是混合,不是函数
定义形参@a
设置形参为background-color
的属性值,等于此时这是一个background-color
值可变的一个规则集,然后下面调用的同时进行传参,改变background-color
的值
带参数并且有默认值的混合
设置默认值的方法:形参变量:值
,设置了默认值后,当不给形参传入值的时候,这些变量的值就自动设置为默认值
注意,只有设置了默认值的形参,在调用的时候可以不用在括号里声明,但是没有设置默认值的形参,在调用的时候,若括号里没有声明则会报错
带多个参数的混合
就这种,带多个参数的混合
命名参数
当我们的混合有多个形参,我们可以为其中特定的无默认值或者,需要改变默认值的形参来进行复制
在调用的时候指定变量名,并为他特意赋值
可以做到只修改形参里一些特定变量的默认值
匹配模式
这个混合类似于函数的重载,我们写多个同名同形参的混合,但我们里面的功能不一样,我们可以给每个同名混合的形参前面加上一个字符来作为他的标识符,来区别于其他的同名混合
如果我们给某一同名混合的前面加上一个@_
则他会变成一个自动调用混合,即当我们调用其他同名的混合的时候,系统会自动同时调用这个混合
调用某一同名混合的方法:
当我们调用其中某一个混合,我们可以在实参列表前面加上某一同名混合特有的表示符,来告诉系统我们到底要调用哪个同名混合
即匹配哪个同名混合,(匹配模式)
这里也会自动调用加上@_
的同名混合,第一行是引入其他less文件
less中引入其他less文件
即我们可以复杂而且多用的代码写在一个less文件中,然后其他文件调用传值,类似于封装
在调用其他less中的混合之前,我们需要在调用前面放上声明
语法:
@import "路径"
这样可以直接在一个less文件中使用其他less文件中的内容
arguments变量
用于简化在混合里面调用形参
比较鸡肋,即类似于js中的隐藏数组
即我们混合里面写上@arguments
那么@arguments
的值就等于所有形参的值,如下图,@arguments
的值为1px solid black
也可以写多个@arguments
每个@arguments
的值都一样,都是所有形参的值
less计算
在less中可以进行加减乘除,比如100 + 100px
当然,在less中,运算的双方可以只有一方加单位,在运算的时候,最好在值和运算符号之间加一个空格,不然可能会出错