less基础使用方法之匹配模式、运算、避免编译
HTML
2019-01-04 16:34:08
本文接《less基础使用方法之变量、混合、嵌套》
五、匹配模式
匹配,举个简单栗子来说。就和我们常用的百度一个到了,输入你的内容,去查找出对应的文字。而less中匹配也是类似于这样的效果。
以border为例,每个方向的border都是一个class。在调用中,根据特定的值,来调用对应的class。
编译前
//匹配模式
.border3(top){
border-top: #008000px solid 5px;
}
.border3(bottom){
border-bottom: #008000px solid 5px;
}
.border3(right){
border-right: #008000px solid 5px;
}
.border3(left){
border-left: #008000px solid 5px;
}
.test_border{
.border3(top);//调用参数为top的class
}
编译后
.test_border {
border-top: #008000px solid 5px;
}
注:这里不仅仅只是border,其余任何都可以这么处理。如定位,三角形的箭头方向等等
六、运算
less支持运算符+-*/
如,我们常用的宽度加减乘除等的;
上一篇的变量设置中就简单的使用了运算符+
七、避免编译
为什么我们要避免编译,大家都知道less是支持运算的。简而言之,就是你在css中的任何运算操作,经过less编译后都会进行处理。
到这里你是否记得css3中有这样一个函数calc()
如果你在less中使用该函数的话,经过编译后,得到的结果可能并非是你想要的,而是经过计算后的结果。那么这个时候就需要用到避免编译操作;
编译前
.tets{
width:~"calc(100% - 20%)" ;
}
编译后
.tets {
width: calc(100% - 20%);
}
当然,避免编译不仅仅是用于该参数,对于你所有不想让它进行变异的都可以这么处理~""
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
877篇文章
2318人已阅读