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) {
width: @a;
}
.class1 { .mixin(960px) } //background-color: black; width:960px
.class2 { .mixin(95%) } //background-color: white;width: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开始*/

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有