less混合 + less计算

   日期:2020-11-02     浏览:81    评论:0    
核心提示:less中的混合混合的意思:混合就是将一系列属性从一个规则集引入到另一个规则集的方式通俗来讲,规则集即指一套代码,一套定义一定规则的代码,比如一套定义样式的代码,就是一个规则集比如:这里面的样式就是一个规则集混合就是把一套规则集用于另一个元素上面混合类别:普通混合不带输出的混合带参数的混合带参数并且有默认值的混合带多个参数的混合命名参数匹配模式arguments变量普通混合即直接写一个不影响html中元素的选择器,然后代码体里面写上规则集,然后直接让其他规则集调用这种

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中,运算的双方可以只有一方加单位,在运算的时候,最好在值和运算符号之间加一个空格,不然可能会出错

calc()运算函数

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服