ZHANGYU.dev

October 14, 2023

Less学习笔记（二）函数

CSS2.3 min to read

逻辑函数

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

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);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false

isstring(#ff0);     // false
isstring(blue);     // false
isstring("string"); // true
isstring(1234);     // false
isstring(56px);     // false
isstring(7.8%);     // false
isstring(keyword);  // false
isstring(url(...)); // false

iscolor(#ff0);     // true
iscolor(blue);     // true
iscolor("string"); // false
iscolor(1234);     // false
iscolor(56px);     // false
iscolor(7.8%);     // false
iscolor(keyword);  // false
iscolor(url(...)); // false

更多还是见文档

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

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

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