less学习笔记(二)

1.作用域:基本与javascrip的作用域相似,即先找局部变量,后找全局变量。找变量时遵循就近原则。

2.条件表达式:
.mixin (@a) when (lightness(@a) >= 50%) { //255/2=127.5
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#7e7e7e) } //221 > 127.5 >50% background-color: black; 7e7e7e = 126
.class2 { .mixin(#808080) } //85 <127.5 <50% background-color: white; 808080 = 128

iscolor,isnumber.....判断值得类型
.mixin (@a) when (iscolor(@a)) { //255/2=127.5
background-color: black;
}
.mixin (@a) when (isnumber(@a) ) {
background-color: white;
shuzi:shuzi;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#7e7e7e) } //background-color: black;
.class2 { .mixin(123) } //background-color: white;
除此之外还有:isstring,iskeyword,isurl


//ispixel,ispercentage.....单位检查函数
.mixin (@a) when (ispixel(@a)) {
background-color: black;
}
.mixin (@a) when (ispercentage(@a) ) {
background-color: white;
}
.mixin (@a) {
@a;
}
.class1 { .mixin(960px) } //background-color: black; 960px
.class2 { .mixin(95%) } //background-color: white;95%
除此之外还有:isem,isunit

3.循环(loop)
.loop(@counter) when (@counter < 7) {
h@{counter}{
padding: (10px * @counter);
}// 每次调用时产生的样式代码
.loop((@counter + 1)); // 递归调用自身
}

div {
.loop(1); // 调用循环
}

4.合并属性
//+ 合并以后,以逗号分割属性值
.mixin() {
box-shadow+: inset 0 0 10px #555 ;
}
.myclass {
.mixin();
box-shadow+: 0 0 20px black;
}

//+_ 合并以后,以空格分割属性值
.a(){
background+_:#f60;
background+_:url("/sss.jod") ;
background+_:no-repeat;
background+_:center;
}
.myclass {
.a()
}

5.引入(import):
@import "main.less"; //普通的引入方式
@import (reference) "main.less"; //引用LESS文件,但是不输出
@import (inline) "main.less"; //引用LESS文件,但是不进行操作
@import (once) "main.less"; //引用LESS文件,但是不进行操作
@import (less) "index.css"; //无论是什么格式的文件,都把他作为LESS文件操作
@import (css) "main.less"; //无论是什么格式的文件,都把他作为CSS文件操作
@import (multiple) "main.less"; //multiple,允许引入多次相同文件名的文件
//在后面添加!important关键字,编译出来的css属性中后面全都会加上!important关键字,增加属性的权值

6.函数库
1)color():解析颜色,将代表颜色的字符串转换为颜色值;
2)convert():将数字从一种类型转换为另一种类型,可以转换长度、角度(grad--梯度,turn--圆)、时间单位 。
用法:convert(2s,ms)//结果是2000ms
3)unit():移除或者改变属性值的单位。unit(100,px)/*100px*/ unit(100px)/*100*/
4)default():只能在边界条件中使用,没有匹配到自定义函数(mixin)时返回true,否则返回false。
5)escape():将输入字符串中的url特殊字符进行编码处理。
6)e()或~:css转义,即原样输出到css。
7)%():格式化字符串,demo:font-family:%("%a %a","Microsoft","Yahei");//font-family:""Microsoft" "Yahei"";
//a,A,d,D可以被任何类型的参数替换;s,S能被除了颜色值以外类型的参数替换;A,D会把"以%22转义;s,S会忽略"的输出。
8)replace():用另一个字符串来替换文本replace("/*原文*/","要替换的字符串","目标字符串");
9)length():返回集合中值得条数,length(1px solid red)//输出3
10)extract():返回集合中指定索引的值,@list/*一个集合*/,extract(@list,1)/*返回集合中的第一个值,索引从1开始*/

原文地址:https://www.cnblogs.com/lm970585581/p/6689268.html