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开始*/