less引入关键字条件表达式循环合并属性

Posted 2020-06-12

引入：可以引用其他文件使用其变量

　　　　用法：@import ”main“//引入main.less文件

　　　　　　　可以带参数：默认once

　　　　　　　　　　　　　@import（reference）”main“/引用但不输出

　　　　　　　　　　　     @import（inline）”main“/引用但不操作，不能使用其变量

　　　　　　　　　　　　　@import（less）”main“/将引入文件当成less处理

　　　　　　　　　　　　　@import（css）”main“/将引入文件当成css处理，引入css时是不操作的，原样输出

　　　　　　　　　　　　@import（multiple）”main“/允许引用多次相同文件名的文件

关键字：!important 加在混合集后可以使所有属性都提升权重

条件表达式：

　　带条件的混合：lightness（）表示亮度

　　.public(@color)when(lightness(@color)>=50%) {
　　　　background: black;
　　}
　　.public(@color)when(lightness(@color)<50%) {
　　　　background: white;
　　}
　　.public(@color){
　　　　color: @color;
　　}
　　.class1{
　　　　.public(rgb(128,245,234));
　　}
　　.class2{
　　　　.public(rgb(33,44,55));
　　}

　　判断值得函数：iscolor()、isnumber()

　　检查单位函数：ispixel()、ispercentage()

循环：

　　.loop(@count) when(@count>0){
　　　　[email protected]{count}{
　　　　margin:@count*10px ;
　　}
　　.loop((@count - 1));//注意变量和运算符之间一定要有空格
　　}

　　div{
　　　　.loop(6)
　　}

合并属性：+_表示用空格分开属性;+表示用逗号分开

　　.my(){
　　　　background+_:url(‘ns/jpg‘) ;
　　}
　　.class1{
　　　　.my;
　　　　background+_:#000;
　　}//.class1 {background: url(‘ns/jpg‘) #000;}