Less学习笔记（二）函数

逻辑函数

if

if接收3个参数，第一个参数为表达式，第二个参数为表达式结果为true时的返回值，第三个参数为表达式结果为false的返回值

@some: foo;div {    margin: if((2 > 1), 0, 3px);    color:  if((iscolor(@some)), darken(@some, 10%), black);}

输出

div {    margin: 0;    color:  black;}

boolean

boolean可以用来存储某个表达式的结果，给if使用

@bg: black;@bg-light: boolean(luma(@bg) > 50%);div {  background: @bg;  color: if(@bg-light, black, white);}

String函数

escape

escape函数用来encoding字符串

escape('a=1')// 输出a%3D1

e

e返回原来的字符串，但是不带引号

@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()"filter: e(@mscode);// 输出filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

replace

replace函数可以替换字符串

replace("Hello, Mars?", "Mars\?", "Earth!");// "Hello, Earth!";

List函数

length

返回list中的元素个数

length(1px solid #0080ff);// 3

extract

返回list中指定位置的元素

extract(8px dotted red, 2);// dotted

range

根据参数，返回一个list

参数1 开始位置 e.g. 1或者1px （可选参数）
参数2 结束位置 e.g. 5px
参数3 跨度（可选参数）

value: range(4);// 输出value: 1 2 3 4;value: range(10px, 30px, 10);// 输出value: 10px 20px 30px;

each

循环一个list

@selectors: blue, green, red;each(@selectors, {  .sel-@{value} {    a: b;  }});// 输出.sel-blue {  a: b;}.sel-green {  a: b;}.sel-red {  a: b;}

默认可以使用的变量是@value、@key、@index

例子

使用range和each来创建循环

each(range(4), {  .col-@{value} {    height: (@value * 50px);  }});// 输出.col-1 {  height: 50px;}.col-2 {  height: 100px;}.col-3 {  height: 150px;}.col-4 {  height: 200px;}

Math函数

Math函数感觉很多了，基本的是四舍五入、开方、去最大最小值，相信使用三角函数的都是比较高阶的用法了

具体见文档

Type函数

Type函数用来判断是否是某种类型

isnumber(#ff0);     // falseisnumber(blue);     // falseisnumber("string"); // falseisnumber(1234);     // trueisnumber(56px);     // trueisnumber(7.8%);     // trueisnumber(keyword);  // falseisnumber(url(...)); // falseisstring(#ff0);     // falseisstring(blue);     // falseisstring("string"); // trueisstring(1234);     // falseisstring(56px);     // falseisstring(7.8%);     // falseisstring(keyword);  // falseisstring(url(...)); // falseiscolor(#ff0);     // trueiscolor(blue);     // trueiscolor("string"); // falseiscolor(1234);     // falseiscolor(56px);     // falseiscolor(7.8%);     // falseiscolor(keyword);  // falseiscolor(url(...)); // false

更多还是见文档

还有很多颜色转换、颜色混合的，还是文档写的清楚

虽然感觉这一篇很水，本来在官网上“函数”是单独的一个页面，想着好好写一篇，没想到工具函数太多了，想想基础使用应该都用不上，如果光是复制个例子根本没有意义

像后面的颜色混合，如果有设计师专门标明了混合方法感觉还能用用，但是在实现做项目感觉很少能用的上，就这样子吧