Less系列之函数（Functions）_less function

---

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。

函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
1
2
3
4
5
6
7
8

1、Logical函数

1.1、if

根据条件返回两个值的一个。

1.1.1、参数

• 【condition】——布尔表达式
• 【value1】——如果条件是 true，一个值返回
• 【value2】——如果条件是 false，一个值返回

v3.0.0发布，v3.6.0更新

1.1.2、示例

@some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), @some, black);
}
1
2
3
4
5
6

输出

div {
    margin: 0;
    color:  black;
}
1
2
3
4

注：一个布尔表达式支持和守卫声明一样的条件参数。

if(not (true), foo, bar);
if((true) and (2 > 1), foo, bar);
if((false) or (isstring("boo!")), foo, bar);
1
2
3

注：在3.6之前，条件需要一组括号。

if(2 > 1, blue, green);   // Causes an error in 3.0-3.5.3
if((2 > 1), blue, green); // Ok 3.0+
1
2

1.2、boolean

计算结果为真或者假

你可以"存储"在守卫或 if() 评估的 boolean。

1.2.1、参数

• 【condition】——布尔表达式

v3.0.0发布，v3.6.0更新

1.2.2、示例

@bg: black;
@bg-light: boolean(luma(@bg) > 50%);

div {
  background: @bg; 
  color: if(@bg-light, black, white);
}
1
2
3
4
5
6
7

输出

div {
  background: black;
  color: white;
}
1
2
3
4

2、字符串函数

2.1、转义 escape

应用于特殊字符的 url 编码的输入。

不会编码的字符：,，/，?，@，&，+，'，~，! 和 $；
会编码的字符：\<space\>，#，^，(，)，{，}，|，:，>，<，;，]，[ 和 =；

2.1.1、参数

要转义的字符串。

2.1.2、返回值

没有引号的转义后的字符串。

2.1.3、示例

escape('a=1')
1

输出

a%3D1
1

如果参数不是字符串，则返回未定义的颜色或未改变的任何其他类型的参数输入。

2.2、e

字符串转义

返回转义前的字符串。它可以用来输出不是有效的 CSS 语法的 CSS 值，或使用 less 不能识别的专有语法。

2.2.1、参数

转义了的字符串

2.2.2、返回值

没有引号的未转义的字符串。

2.2.3、示例

@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()" 
filter: e(@mscode);
1
2

输出

filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
1

2.3、% 格式化

格式化字符串

2.3.1、语法

%(string, arguments ...)
1

2.3.2、参数

第一个参数是带有占位符的字符串。所有占位符都以百分号%开始，后跟字母s、S、d、 D、a 和 A。其余参数包含替换占位符的表达式。如果需要输出百分比符号，请用另一个百分比转义。

如果需要将特殊字符转义为 utf-8 转义代码，请使用大写占位符。函数会转义除()'!以外的所有特殊字符。空格会被编码为%20,。小写占位符保留特殊字符不变。

占位符

• d，D，a，A：可以被任何类型的参数（颜色，数字，转移值，表达式，…）。如果将它们与string组合使用，将使用整个字符串，包括它的引号。然而，引号被放在字符串中，它们不会被/或任何类似的东西转义。
• s，S：可以被任何表达式代替。如果与string一起使用，则只使用字符串值，引号省略。

参数

• 【string】——需要格式的占位符字符串。
• 【anything】——替换占位符的值。

2.3.3、示例

format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");
1
2
3
4

输出：

format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";
1
2
3
4

2.4、replace 替换

替换字符串中的一个文本。

Released v1.7.0

2.4.1、参数

• 【string】——搜索和替换的字符串。
• 【pattern】——一个字符串或正则表达式。
• 【replacement】——替换匹配的字符串。
• 【flags】——(可选)正则表达式的规则。

2.4.2、返回值

替换后的字符串。

2.4.3、示例

replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');
1
2
3
4

输出

"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;
1
2
3
4

3、List 函数

3.1、length

返回列表中元素的个数。

3.1.1、参数

• 【list】——一个逗号或空格分隔的列表的值

3.1.2、示例

@list: "banana", "tomato", "potato", "peach";
n: length(@list);
1
2

输出

n: 4;
1

3.2、extract

返回列表中指定的值。

3.2.1、参数

• 【list】——一个逗号或空格分隔的列表的值；
• 【index】——一个整数，返回列表中指定一个位置的元素。

3.2.2、示例

@list: apple, pear, coconut, orange;
value: extract(@list, 3);
1
2

输出

value: coconut;
1

3.3、range

Released v3.9.0

生成一个范围值的列表。

3.3.1、参数

• 【start】——(可选)开始值。如 1 或 1px
• 【end】——最终值，例如 5px
• 【step】——(可选)步长

3.3.2、示例

value: range(4);
1

输出

value: 1 2 3 4;
1

3.4、each

Released v3.7.0

将规则集绑定到列表的每个成员。

3.4.1、参数

• 【list】——一个逗号或空格分隔的列表的值；
• 【rules】——一个匿名的规则集、mixin。

3.4.2、示例

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});
1
2
3
4
5
6
7

输出

.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}
1
2
3
4
5
6
7
8
9

默认情况下，每个列表成员都将每个规则集绑定到@value、@key和@index变量。对于大多数列表，@key和@index将被分配相同的值(数字位置，基于1)。但是，您也可以将规则集本身用作结构化列表。就像在

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}
1
2
3
4
5
6
7
8
9
10

输出

.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}
1
2
3
4
5

3.4.3、Setting variable names in each()

不必在 each() 函数中使用 @value、@key 和 @index。在 Less 3.7 中，通过 each() 函数，Less 引入了匿名 mixin 的概念，以后可能会扩展到语法的其他部分。

匿名mixin使用 #() 或 .() 的形式，以 . 或者#，就像普通的mixin一样。在 each() 中，您可以这样使用它。

.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Call mixin and iterate each rule
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}
1
2
3
4
5
6
7
8
9
10
11

输出

.set-2 {
  one-1: blue;
  two-2: green;
  three-3: red;
}
1
2
3
4
5

each() 函数将接受匿名mixin中定义的变量名，并按顺序将它们绑定到@value、@key和@index。如果你只写each(@list， #(@value){})，那么@key和@index都不会被定义。

3.4.4、Creating a for loop using range and each

Requires Less v3.9.0

可以模拟一个for循环，只需生成一个数字列表，并使用每个将其扩展为一个规则集。

each(range(4), {
  .col-@{value} {
    height: (@value * 50px);
  }
});
1
2
3
4
5

输出

.col-1 {
  height: 50px;
}
.col-2 {
  height: 100px;
}
.col-3 {
  height: 150px;
}
.col-4 {
  height: 200px;
}
1
2
3
4
5
6
7
8
9
10
11
12

4、Math函数

4.1、ceil

向上取整

4.1.1、参数

【number】——一个浮点数

4.1.2、出参

整数

4.1.3、示例

ceil(2.4)
1

输出

3
1

4.2、floor

向下取整

4.2.1、参数

【number】——一个浮点数

4.2.2、出参

整数

4.2.3、示例

floor(2.6)
1

输出

2
1

4.3、percentage

一个浮点数转换成百分数字符串。

4.3.1、参数

【number】——一个浮点数

4.3.2、出参

数字

4.3.3、示例

percentage(0.5)
1

输出

50%
1

4.4、round

四舍五入

4.4.1、参数

• 【number】——一个浮点数；
• 【decimalPlaces】——可选：小数点后的数量；

4.4.2、出参

数字

4.4.3、示例

round(1.67)
round(1.67, 1)
1
2

输出

2
1.7
1
2

4.5、sqrt

计算平方根，单位保持。

4.5.1、参数

• 【number】——一个浮点数；

4.5.2、出参

数字

4.5.3、示例

sqrt(25cm)
1

输出

5cm
1

4.6、abs

计算一个数的绝对值，保持单位。

4.6.1、参数

• 【number】——一个浮点数；

4.6.2、出参

数字

4.6.3、示例

abs(-18.6%)
1

输出

18.6%;
1

4.7、sin

计算正弦函数。

4.7.1、参数

• 【number】——一个浮点数；

4.7.2、出参

数字

4.7.3、示例

sin(1); // sine of 1 radian
sin(1deg); // sine of 1 degree
sin(1grad); // sine of 1 gradian
1
2
3

输出

0.8414709848078965; // sine of 1 radian
0.01745240643728351; // sine of 1 degree
0.015707317311820675; // sine of 1 gradian
1
2
3

4.8、asin

计算反正弦函数。

4.8.1、参数

• 【number】——[-1, 1]之间的浮点数；

4.8.2、出参

返回一个数字，数字弧度如-π/ 2和π/ 2之间。

4.8.3、示例

asin(-0.8414709848078965)
asin(0)
asin(2)
1
2
3

输出

-1rad
0rad
NaNrad
1
2
3

4.9、cos

计算余弦函数。

4.9.1、参数

• 【number】——一个浮点数

4.9.2、出参

数字

4.9.3、示例

cos(1) // cosine of 1 radian
cos(1deg) // cosine of 1 degree
cos(1grad) // cosine of 1 gradian
1
2
3

输出

0.5403023058681398 // cosine of 1 radian
0.9998476951563913 // cosine of 1 degree
0.9998766324816606 // cosine of 1 gradian
1
2
3

4.10、acos

计算反余弦函数。

4.10.1、参数

• 【number】——[-1, 1]之间的浮点数；

4.10.2、出参

数字

4.10.3、示例

acos(0.5403023058681398)
acos(1)
acos(2)
1
2
3

输出

1rad
0rad
NaNrad
1
2
3

4.11、tan

计算正切函数。

4.11.1、参数

• 【number】——一个浮点数

4.11.2、出参

数字

4.11.3、示例

tan(1) // tangent of 1 radian
tan(1deg) // tangent of 1 degree
tan(1grad) // tangent of 1 gradian
1
2
3

输出

1.5574077246549023   // tangent of 1 radian
0.017455064928217585 // tangent of 1 degree
0.015709255323664916 // tangent of 1 gradian
1
2
3

4.12、atan

计算反正切函数。

4.12.1、参数

• 【number】——[-1, 1]之间的浮点数；

4.12.2、出参

数字

4.12.3、示例

atan(-1.5574077246549023)
atan(0)
round(atan(22), 6) // arctangent of 22 rounded to 6 decimal places
1
2
3

输出

-1rad
0rad
1.525373rad;
1
2
3

4.13、pi

4.13.1、出参

一个数π

4.13.2、示例

pi()
1

输出

3.141592653589793
1

4.14、pow

求n次方

4.14.1、参数

• 【number】——底数----一个浮点数
• 【number】——指数----一个浮点数

4.14.2、出参

数

4.14.3、示例

pow(0cm, 0px)
pow(25, -2)
pow(25, 0.5)
pow(-25, 0.5)
pow(-25%, -0.5)
1
2
3
4
5

输出

1cm
0.0016
5
NaN
NaN%
1
2
3
4
5

4.15、mod

求余数

4.15.1、参数

• 【number】——一个浮点数
• 【number】——一个浮点数

4.15.2、出参

数字

4.15.3、示例

mod(0cm, 0px)
mod(11cm, 6px);
mod(-26%, -5);
1
2
3

输出

NaNcm;
5cm
-1%;
1
2
3

4.16、min

返回最小值

4.16.1、参数

• 【value1, …, valueN】——一个或多个值去比较；

4.16.2、出参

最小值

4.16.3、示例

min(5, 10);
1

输出

5
1

4.17、max

返回最大值

4.17.1、参数

• 【value1, …, valueN】——一个或多个值去比较；

4.17.2、出参

最大值

4.17.3、示例

max(5, 10);
1

输出

10
1

5、Type 函数

5.1、isnumber

5.1.1、参数

• 【number】——一个数或变量

5.1.2、出参

如果值是数，返回true，否则返回false。

5.1.3、示例

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
1
2
3
4
5
6
7
8

5.2、isstring

5.2.1、参数

【value】——一个给定的值或变量

5.2.2、出参

如果值是 string，返回 true，否则返回 false。

5.2.3、示例

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
1
2
3
4
5
6
7
8

5.3、iscolor

5.3.1、参数

【value】——一个给定的值或变量

5.3.2、出参

如果值是 color，就返回 true，否则返回 false。

5.3.3、示例

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
1
2
3
4
5
6
7
8

5.4、iskeyword

5.4.1、参数

【value】——一个给定的值或变量

5.4.2、出参

如果值是一个 keyword，返回 true，否则返回 false

5.4.3、示例

iskeyword(#ff0);     // false
iskeyword(blue);     // false
iskeyword("string"); // false
iskeyword(1234);     // false
iskeyword(56px);     // false
iskeyword(7.8%);     // false
iskeyword(keyword);  // true
iskeyword(url(...)); // false
1
2
3
4
5
6
7
8

5.5、isurl

5.5.1、参数

【value】——一个给定的值或变量

5.5.2、出参

如果一个值是 url，返回 true，否则返回 false。

5.5.3、示例

isurl(#ff0);     // false
isurl(blue);     // false
isurl("string"); // false
isurl(1234);     // false
isurl(56px);     // false
isurl(7.8%);     // false
isurl(keyword);  // false
isurl(url(...)); // true
1
2
3
4
5
6
7
8

5.6、ispixel

5.6.1、参数

【value】——一个给定的值或变量

5.6.2、出参

如果一个值是像素，返回 true，否则返回 false。

5.6.3、示例

ispixel(#ff0);     // false
ispixel(blue);     // false
ispixel("string"); // false
ispixel(1234);     // false
ispixel(56px);     // true
ispixel(7.8%);     // false
ispixel(keyword);  // false
ispixel(url(...)); // false
1
2
3
4
5
6
7
8

5.7、isem

5.7.1、参数

【value】——一个给定的值或变量

5.7.2、出参

如果一个值是 em 结尾的值，则返回 true，否则返回 false。

5.7.3、示例

isem(#ff0);     // false
isem(blue);     // false
isem("string"); // false
isem(1234);     // false
isem(56px);     // false
isem(7.8em);    // true
isem(keyword);  // false
isem(url(...)); // false
1
2
3
4
5
6
7
8

5.8、ispercentage

5.8.1、参数

【value】——一个给定的值或变量

5.8.2、出参

如果一个值是百分比，则返回 true，否则返回 false。

5.8.3、示例

ispercentage(#ff0);     // false
ispercentage(blue);     // false
ispercentage("string"); // false
ispercentage(1234);     // false
ispercentage(56px);     // false
ispercentage(7.8%);     // true
ispercentage(keyword);  // false
ispercentage(url(...)); // false
1
2
3
4
5
6
7
8

5.9、isunit

5.9.1、参数

• 【value】——一个给定的值或变量
• 【unit】——可选的单位标识符

5.9.2、出参

如果一个值是规定的单位，则返回 true， 否则返回 false。

5.9.3、示例

isunit(11px, px);  // true
isunit(2.2%, px);  // false
isunit(33px, rem); // false
isunit(4rem, rem); // true
isunit(56px, "%"); // false
isunit(7.8%, '%'); // true
isunit(1234, em);  // false
isunit(#ff0, pt);  // false
isunit("mm", mm);  // false
1
2
3
4
5
6
7
8
9

5.10、isruleset

5.10.1、参数

【value】——一个被定义的变量

5.10.2、出参

如果一个值是规则集，则返回 true，否则返回 false；

5.10.3、示例

@rules: {
    color: red;
}

isruleset(@rules);   // true
isruleset(#ff0);     // false
isruleset(blue);     // false
isruleset("string"); // false
isruleset(1234);     // false
isruleset(56px);     // false
isruleset(7.8%);     // false
isruleset(keyword);  // false
isruleset(url(...)); // false
1
2
3
4
5
6
7
8
9
10
11
12
13

6、Misc函数

6.1、color

解析颜色，将一个表示颜色的字符串成为颜色。

6.1.1、参数

【string】——一个表示颜色的字符串

6.1.2、出参

color类型的值

6.1.3、示例

color("#aaa"); // #aaa
1

6.2、image-size

Added in: v2.2.0

从文件中获取图像的尺寸

6.2.1、参数

【string】——需要获取尺寸的文件

6.2.2、出参

dimension类型的值

6.2.3、示例

image-size("file.png"); // 10px 10px
1

6.2.4、注意

此功能需要在每个环境中实现，它目前仅在 node 环境中可用。

6.3、image-width

Added in: v2.2.0

从文件中获取图像的宽度

6.3.1、参数

【string】——需要获取尺寸的文件

6.3.2、返回值

dimension类型的值

6.3.3、示例

image-width("file.png"); // 10px
1

6.3.4、注意

此功能需要在每个环境中实现，它目前仅在 node 环境中可用。

6.4、image-height

Added in: v2.2.0

从文件中获取图像的高度

6.4.1、参数

【string】——需要获取尺寸的文件

6.4.2、返回值

dimension类型的值

6.4.3、示例

image-height("file.png"); // 10px
1

6.4.4注意

此功能需要在每个环境中实现，它目前仅在 node 环境中可用。

6.5、convert

将一个数字从一个单位转换为其他单位

6.5.1、参数及返回值相关

第一个参数包含一个带有单位的数字；
第二个参数包含单位，如果单位是兼容的，数字将被转化，如果它们不兼容，则第一个参数将不加修改地返回。

6.5.2、单位分组

1. lengths：m，cm，mm，in，pt 和 pc；
2. time：s 和 ms；
3. angle：rad，deg，grad 和 turn；

6.5.3、参数

• 【number】——一个带有单位的浮点数；
• 【identifier, string or escaped value】——单位

6.5.4、出参

number类型的值

6.5.5、示例

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // incompatible unit types
1
2
3

输出

9000ms
140mm
8
1
2
3

6.6、data-uri

如果 ieCompat 属性是打开的，冰洁资源文件太大，或者如果您在浏览器中使用该函数，则返回转义后的 url 类型的值。如果没有给出MIME类型，则 node 使用 MIME包来确定正确的 MIME 类型。

6.6.1、参数

• 【mimetype】——一个MIME类型的字符串（可选）；
• 【url】——文件的 URL；

6.6.2、注意

1. 如果没有 mimetype，data-uri 函数会根据文件名后缀猜测它。文本和 svg 文件编码为 utf-8，其他文件编码为 base64；
2. 如果用户提供了 mimetype，如果 mimetype 参数以 base64 结束，则函数使用 base64。例如， image/jpeg;base64 被编码为 base64，而 text/html 被编码为 utf-8；

6.6.3、示例

data-uri('../data/image.jpg');
data-uri('image/jpeg;base64', '../data/image.jpg');
data-uri('image/svg+xml;charset=UTF-8', 'image.svg');
1
2
3

输出

url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");
1
2
3

输出在浏览器里

url('../data/image.jpg');
1

6.7、default

6.7.1、情形一

仅在 守卫条件中使用，只有在没有其他 mixin 匹配时才返回 true，否则返回 false；

示例

.mixin(1)                   {x: 11}
.mixin(2)                   {y: 22}
.mixin(@x) when (default()) {z: @x}

div {
  .mixin(3);
}

div.special {
  .mixin(1);
}
1
2
3
4
5
6
7
8
9
10
11

输出

div {
  z: 3;
}
div.special {
  x: 11;
}
1
2
3
4
5
6

6.7.2、情形二

可以使用 守卫操作符默认返回的值。例如：.mixin() when not(default()) {}只有在至少有一个与 .mixin() 匹配的 mixin 定义时才会匹配。

示例

.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default())    {padding: (@value / 5)}

div-1 {
  .mixin(100px);
}

div-2 {
  /* ... */
  .mixin(100%);
}
1
2
3
4
5
6
7
8
9
10
11

结果

div-1 {
  width: 100px;
  padding: 20px;
}
div-2 {
  /* ... */
}
1
2
3
4
5
6
7

6.7.3、情形三

允许在相同的守卫条件下或者在具有相同名称的 mixins 的不同条件下多次调用 default()

示例

div {
  .m(@x) when (default()), not(default())    {always: @x}
  .m(@x) when (default()) and not(default()) {never:  @x}

  .m(1); // OK
}
1
2
3
4
5
6

如果使用 deault（）时被检测出多个 mixin 定义之间存在潜在冲突，则 Less 会抛出错误。

示例

div {
  .m(@x) when (default())    {}
  .m(@x) when not(default()) {}

  .m(1); // Error
}
1
2
3
4
5
6

在上面的例子中，不可能确定每个 default() 调用应该返回什么值，因为它们递归地依赖于彼此。

6.7.4、情形四

这个 default 函数只能作为 Less 函数在 守卫表达式中使用，如果在 mixin 保护条件之外使用，它会被转义为一个常规的 CSS 值。

示例

div {
  foo: default();
  bar: default(42);
}
1
2
3
4

结果为

div {
  foo: default();
  bar: default(42);
}
1
2
3
4

6.7.5、多个default()的高级用法

.x {
  .m(red)                                    {case-1: darkred}
  .m(blue)                                   {case-2: darkblue}
  .m(@x) when (iscolor(@x)) and (default())  {default-color: @x}
  .m('foo')                                  {case-1: I am 'foo'}
  .m('bar')                                  {case-2: I am 'bar'}
  .m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default}

  &-blue  {.m(blue)}
  &-green {.m(green)}
  &-foo   {.m('foo')}
  &-baz   {.m('baz')}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

结果

.x-blue {
  case-2: #00008b;
}
.x-green {
  default-color: #008000;
}
.x-foo {
  case-1: I am 'foo';
}
.x-baz {
  default-string: and I am the default;
}
1
2
3
4
5
6
7
8
9
10
11
12

6.8、unit

删除或更改尺寸的单位

6.8.1、参数

• 【dimension】——一个带或者不带单位的数；
• 【unit】——要改变的单位，如果省略，则删除单位；

6.8.2、示例

unit(5, px) // 5px
unit(5em) // 5
1
2

6.9、get-unit

返回一个数的单位

6.9.1、逻辑

如果参数为一个带有单位的数字 ，则返回该单位，否则，将返回一个空。

6.9.2、参数

【number】——一个带或者不带单位的数

6.9.3、示例

get-unit(5px) // px
get-unit(5)
1
2

6.10、svg-gradient

生成 multi-stop svg gradients。

6.10.1、逻辑

svg-gradient 生成 multi-stop svg gradients。它必须至少有三个参数，第一个参数指定梯度的类型和方向，低于参数列出颜色及位置。第一个和最后一个指定颜色的位置是可选的，其余颜色必须指定位置。

方向必须是 to bottom，to right，to bottom right，to top right，ellipse 或者 ellipse at center中的一个。方向可以指定为两个以~ 连接的方向和以空格分隔的列表。

方向必须有两个或两个以上的颜色。它们可以在列表中提供，也可以在单独的参数中指定每个颜色停止的位置。

6.10.2、参数

6.10.2.1、颜色位置在列表中

• 【escaped value 或者 list of identifiers】——方向；
• 【list】——所有颜色和他们的位置；

6.10.2.2、颜色位置在参数中

• 【escaped value 或者 list of identifiers】——方向；
• 【color [percentage]】——第一个颜色和它的相对位置（位置是可选的）；
• 【color percent】——(可选) 第二个颜色和它的相对位置；
• …
• 【color percent】——(可选) 第n个颜色和它的相对位置；
• 【color [percentage]】——最后一个颜色和它的相对位置（位置是可选的）；

6.10.3、出参

"URI编码"的 svg grandient 的路径

6.10.4、示例

div {
  @list: red, green 30%, blue;
  background-image: svg-gradient(to right, @list);
}
或
div {
  background-image: svg-gradient(to right, red, green 30%, blue);
}
1
2
3
4
5
6
7
8

结果为

div {
  background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0000%22%2F%3E%3Cstop%20offset%3D%2230%25%22%20stop-color%3D%22%23008000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23gradient)%22%20%2F%3E%3C%2Fsvg%3E');
}
1
2
3

注意：在2.2.0版本前，这个结果是 base64 编码；

生成的背景图像左侧为红色，30%的宽度为绿色，以蓝色结束。Base64编码部分包含如下svg-gradient

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ff0000"/>
        <stop offset="30%" stop-color="#008000"/>
        <stop offset="100%" stop-color="#0000ff"/>
    </linearGradient>
    <rect x="0" y="0" width="1" height="1" fill="url(#gradient)" />
</svg>
1
2
3
4
5
6
7
8
9

7、颜色定义函数

7.1、rgb

定义一个不透明的颜色对象从十进制的红绿蓝值中。

标准 HTML/CSS格式中的文字颜色值也可以用来定义颜色，例如 #FF0000；

7.1.1、参数

• 【red】——0-255之间的正整数或0-100%之间的百分比；
• 【green】——0-255之间的正整数或0-100%之间的百分比；
• 【blue】——0-255之间的正整数或0-100%之间的百分比；

7.1.2、出参

颜色类型的值

7.1.3、示例

rgb(90, 129, 32) // #5a8120
1

7.2、rgba

创建一个透明的颜色对象从十进制的红绿蓝和透明度值中。

7.2.1、参数

• 【red】——0-255之间的正整数或0-100%之间的百分比；
• 【green】——0-255之间的正整数或0-100%之间的百分比；
• 【blue】——0-255之间的正整数或0-100%之间的百分比；
• 【alpha】——0-1之间的数或者0-100%之间的百分比；

7.2.2、出参

颜色类型的值

7.2.3、示例

rgba(90, 129, 32, 0.5) // rgba(90, 129, 32, 0.5)
1

7.3、argb

创建一个#AARRGGBB格式的十六进制颜色， 而不是#RRGGBBAA；

这个格式在IE、.NET、和 Android 开发中

7.3.1、参数

颜色类型的值或颜色对象

7.3.2、出参

字符串

7.3.3、示例

argb(rgba(90, 23, 148, 0.5)); // #805a1794
1

7.4、hsl

基于色相、饱和度、亮度创建一个不透明的颜色对象；

7.4.1、参数

• 【hue】——代表度的0-360的正整数；
• 【saturation】——0-100之间的百分比或0-1之间的数；
• 【lightness】——0-100之间的百分比或0-1之间的数；

7.4.2、出参

一个颜色类型的值

7.4.3、示例

hsl(90, 100%, 50%) // #80ff00
1

如果你想创建一个基于其他颜色通道的新的颜色，这将是有用的。例如 @new: hsl(hue(@old), 45%, 90%);

@new 将拥有 @old 的色相和它自己的饱和度和亮度。

7.5、hsla

基于色相、饱和度、亮度、透明度创建一个透明的颜色对象；

7.5.1、参数

• 【hue】——代表度的0-360的正整数；
• 【saturation】——0-100之间的百分比或0-1之间的数；
• 【lightness】——0-100之间的百分比或0-1之间的数；
• 【alpha】——0-100之间的百分比或0-1之间的数；

7.5.2、出参

一个颜色类型的值

7.5.3、示例

hsla(90, 100%, 50%, 0.5) // rgba(128, 255, 0, 0.5)
1

7.6、hsv

基于色相、饱和度、明度创建一个不透明的颜色对象；

7.6.1、参数

• 【hue】——代表度的0-360的正整数；
• 【saturation】——0-100之间的百分比或0-1之间的数；
• 【value】——0-100之间的百分比或0-1之间的数；

7.6.2、出参

一个颜色类型的值

7.6.3、示例

hsv(90, 100%, 50%) // #408000
1

注：这个 ps 中可用的颜色，与 hsl 不同；

7.7、hsva

基于色相、饱和度、明度、透明度创建一个透明的颜色对象；

7.7.1、参数

• 【hue】——代表度的0-360的正整数；
• 【saturation】——0-100之间的百分比或0-1之间的数；
• 【value】——0-100之间的百分比或0-1之间的数；
• 【alpha】——0-100之间的百分比或0-1之间的数；

7.7.2、出参

返回一个颜色类型的值

7.7.3、示例

hsva(90, 100%, 50%, 0.5) // rgba(64, 128, 0, 0.5)
1

8、颜色通道函数

8.1、hue

在 hsl 颜色中提取颜色对象的色调。

8.1.1、参数

【color】——一个颜色对象

8.1.2、出参

0-360正整数

8.1.3、示例

hue(hsl(90, 100%, 50%)) // 90
1

8.2、saturation

在 HSL颜色中提取颜色对象的饱和度。

8.2.1、参数

【color】——一个颜色对象

8.2.2、出参

0-100百分比

8.2.3、示例

saturation(hsl(90, 100%, 50%)) // 100%
1

8.3、lightness

在 HSL颜色中提取颜色对象的明度。

8.3.1、参数

【color】——一个颜色对象

8.3.2、出参

0-100百分比

8.3.3、示例

lightness(hsl(90, 100%, 50%)) // 50%
1

8.4、hsvhue

在HSV颜色中提取颜色对象的色调。

8.4.1、参数

【color】——一个颜色对象

8.4.2、出参

0-360正整数

8.4.3、示例

hsvhue(hsv(90, 100%, 50%)) // 90
1

8.5、hsvsaturation

在HSV颜色中提取颜色对象的饱和度。

8.5.1、参数

【color】——一个颜色对象

8.5.2、出参

0-100百分比

8.5.3、示例

hsvsaturation(hsv(90, 100%, 50%)) // 100%
1

8.6、hsvvalue

在HSV颜色中提取颜色对象的明度。

8.6.1、参数

【color】——一个颜色对象

8.6.2、出参

0-100百分比

8.6.3、示例

hsvvalue(hsv(90, 100%, 50%)) // 50%
1

8.7、red

提取颜色对象的红色。

8.7.1、参数

【color】——一个颜色对象

8.7.2、出参

0-255浮点数

8.7.3、示例

red(rgb(10, 20, 30)) // 10
1

8.8、green

提取颜色对象的绿色。

8.8.1、参数

【color】——一个颜色对象

8.8.2、出参

0-255浮点数

8.8.3、示例

red(rgb(10, 20, 30)) // 20
1

8.9、blue

提取颜色对象的蓝色。

8.9.1、参数

【color】——一个颜色对象

8.9.2、出参

0-255浮点数

8.9.3、示例

red(rgb(10, 20, 30)) // 30
1

8.10、alpha

提取颜色对象的透明度。

8.10.1、参数

【color】——一个颜色对象

8.10.2、出参

0-1浮点数

8.10.3、示例

alpha(rgba(10, 20, 30, 0.5)) // 0.5
1

8.11、luma

计算颜色对象的亮度（感知亮度）

使用SMPTE C / Rec. 709系数，在WCAG 2.0中推荐。这种计算方法也用于对比函数。

在v1.7.0之前，亮度的计算没有gamma校正，使用luminance函数来计算这些old值。

8.11.1、参数

【color】——一个颜色对象

8.11.2、出参

0-100百分比

8.11.3、示例

luma(rgb(100, 200, 30)) // 44%
1

8.12、luminance

计算亮度值而不进行gamma校正（该函数在v1.7.0之前被命名为luma）

8.12.1、参数

【color】——一个颜色对象

8.12.2、出参

0-100百分比

8.12.3、示例

luma(rgb(100, 200, 30)) // 65%
1

9、颜色操作函数

及颜色操作通常与它们所改变的值相同的单位参数，并且百分比被处理为绝对值，因此增加10%的值会得到20%的结果。当使用相对百分比时（将相对百分比的选项参数设置为relative），增加10%的值，10%的结果是11%。值被固定在它们允许额范围内，在显示返回值的地方，除了通常使用的十六进制版本之外 ，我们还使用了明确每个函数所做的工作。

9.1、saturate

在HSL颜色中增加一个绝对数量的颜色饱和度。

9.1.1、参数

• 【color】——颜色对象
• 【amount】——0-100百分比
• 【method】——可选，设置为 relative，使调整相对于当前值。

9.1.2、出参

颜色类型的值

9.1.3、示例

saturate(hsl(90, 80%, 50%), 20%)  // #80ff00
// hsl(90, 100%, 50%)
1
2

9.2、desaturate

在HSL颜色中减少一个绝对数量的颜色饱和度。

9.2.1、参数

• 【color】——颜色对象
• 【amount】——0-100百分比
• 【method】——可选，设置为 relative，使调整相对于当前值。

9.2.2、出参

颜色类型的值

9.2.3、示例

desaturate(hsl(90, 80%, 50%), 20%)  // #80cc33
// hsl(90, 60%, 50%)
1
2

9.3、lighten

以绝对数量增加HSL颜色中的明度。

9.3.1、参数

• 【color】——颜色对象
• 【amount】——0-100百分比
• 【method】——可选，设置为 relative，使调整相对于当前值。

9.3.2、出参

颜色类型的值

9.3.3、示例

lighten(hsl(90, 80%, 50%), 20%)  // #b3f075
// hsl(90, 80%, 70%)
1
2

9.4、darken

以绝对数量减少HSL颜色中的明度。

9.4.1、参数

• 【color】——颜色对象
• 【amount】——0-100百分比
• 【method】——可选，设置为 relative，使调整相对于当前值。

9.4.2、出参

颜色类型的值

9.4.3、示例

darken(hsl(90, 80%, 50%), 20%)  // #4d8a0f
// hsl(90, 80%, 30%)
1
2

9.5、fadein

降低颜色的透明度（或增加不透明度），使其更不透明。

9.5.1、参数

• 【color】——颜色对象
• 【amount】——0-100百分比
• 【method】——可选，设置为 relative，使调整相对于当前值。

9.5.2、出参

颜色类型的值

9.4.3、示例

fadein(hsla(90, 90%, 50%, 0.5), 10%)  // rgba(128, 242, 13, 0.6)
// hsla(90, 90%, 50%, 0.6)
1
2

9.6、fadeout

增加颜色的透明度（或减少不透明度），使其更不透明。

9.6.1、参数

• 【color】——颜色对象
• 【amount】——0-100百分比
• 【method】——可选，设置为 relative，使调整相对于当前值。

9.6.2、出参

颜色类型的值

9.6.3、示例

fadeout(hsla(90, 90%, 50%, 0.5), 10%)  // rgba(128, 242, 13, 0.4)
// hsla(90, 90%, 50%, 0.4)
1
2

9.7、fade

设置颜色的绝对不透明度。无论它们是否已经有不透明度值，可以应用于颜色。

9.7.1、参数

• 【color】——颜色对象
• 【amount】——0-100百分比

9.7.2、出参

颜色类型的值

9.7.3、示例

fade(hsl(90, 90%, 50%), 10%)  // rgba(128, 242, 13, 0.1)
//hsla(90, 90%, 50%, 0.1)
1
2

9.8、spin

向任何方向旋转颜色的色度。

虽然角度范围是0-360度，它应用了一个取余360的操作，所以你可以传入更大或负的值。例如360和720角度讲产生相同的结果。注意：颜色是通过RGB转换传递的，它不会保留灰度的色相值（因为当没有饱和度时，色相没有意义），所以确保以保留色相的方式应用函数，所以不要这样做。

@c: saturate(spin(#aaaaaa, 10), 10%);
1

等同于

@c: spin(saturate(#aaaaaa, 10%), 10);
1

颜色总是作为RGB值返回，所以对灰色值应用 spin 将不起任何作用。

9.8.1、参数

• 【color】——颜色对象
• 【angle】——旋转的度数（+或-）

9.8.2、出参

颜色类型的值

9.8.3、示例

spin(hsl(10, 90%, 50%), 30) // #f2a60d 
// hsl(40, 90%, 50%)
spin(hsl(10, 90%, 50%), -30) // #f20d59
// hsl(340, 90%, 50%)
1
2
3
4

9.9、mix

把两种颜色按不同比例混合在一起。不透明度包括在计算中。

9.9.1、参数

• 【color1】——颜色对象
• 【color2】——颜色对象
• 【weight】——可选，两种颜色之间的一个百分比，默认为50%

9.9.2、出参

颜色类型的值

9.9.3、示例

mix(#ff0000, #0000ff, 50%) // #800080
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%) // rgba(75, 25, 0, 0.75)
1
2

9.10、tint

混合颜色与白色的比例，这和 mix(#ffffff, @color, @weight)一样。

9.10.1、参数

• 【color】——颜色对象
• 【weight】——可选，两种颜色之间的一个百分比，默认为50%

9.10.2、出参

颜色类型的值

9.10.3、示例

no-alpha: tint(#007fff, 50%);  // no-alpha: #80bfff;
with-alpha: tint(rgba(00,0,255,0.5), 50%);  // with-alpha: rgba(191, 191, 255, 0.75);
1
2

9.11、shade

混合颜色与黑色的可变比例。这个mix(#000000, @color, @weight)一样。

9.11.1、参数

• 【color】——颜色对象
• 【weight】——可选，两种颜色之间的一个百分比，默认为50%

9.11.2、出参

颜色类型的值

9.11.3、示例

no-alpha: shade(#007fff, 50%);   // no-alpha: #004080;
with-alpha: shade(rgba(00,0,255,0.5), 50%);   // with-alpha: rgba(0, 0, 64, 0.75);
1
2

9.12、greyscale

在HSL颜色中去除一个颜色的所有饱和度，和调用desaturate(@color, 100%)一样。

9.12.1、参数

【color】——颜色对象

9.12.2、出参

颜色类型的值

9.12.3、示例

greyscale(hsl(90, 90%, 50%)) // #808080 
// hsl(90, 0%, 50%)
1
2

9.13、contrast

从两种颜色中选择一种颜色与另一种颜色的对比最大的。

9.13.1、参数

• 【color】——要比较的颜色对象；
• 【dark】——可选，指定的深色颜色（默认黑色）；
• 【light】——可选，指定的浅色颜色（默认白色）；
• 【threshold】——0-100百分比，指定从暗到亮的过度位置（默认为43%）。

9.13.2、出参

颜色类型的值

9.13.3、示例

p {
    a: contrast(#bbbbbb);
    b: contrast(#222222, #101010);
    c: contrast(#222222, #101010, #dddddd);
    d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
    e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}
1
2
3
4
5
6
7

输出

p {
    a: #000000 // black
    b: #ffffff // white
    c: #dddddd
    d: #000000 // black
    e: #ffffff // white
}
1
2
3
4
5
6
7

10、颜色混合函数

10.1、multiply

用两种颜色对应的RGB通道相乘，然后除以255，结果是这个颜色变深了。

10.1.1、参数

• 【color1】——颜色对象
• 【color2】——颜色对象

10.1.2、出参

颜色类型的值

10.1.3、示例

multiply(#ff6600, #000000); // #000000
1

10.2、screen

做相反的相乘，结果为明亮的颜色。

10.2.1、参数

• 【color1】——颜色对象
• 【color2】——颜色对象

10.2.2、出参

颜色类型的值

10.2.3、示例

screen(#ff6600, #333333); // #ff8533
1

10.3、overlay

结合 multiply 和 screen 的效果，有条件地使亮通道变亮，使暗通道变暗。

注：条件的结果由第一个颜色参数决定。

10.3.1、参数

• 【color1】——一个基本颜色对象，还有决定颜色，使结果更亮或更深。
• 【color2】——overlay 颜色对象

10.3.2、出参

颜色类型的值

10.3.3、示例

overlay(#ff6600, #333333); // ff2900
1

10.4、softlight

类似于overlay，但避免了纯黑导致纯黑，纯白导致纯白。

10.4.1、参数

• 【color1】——使另一个颜色柔和的颜色物体；
• 【color2】——一个颜色对象被柔和点亮

10.4.2、出参

颜色类型的值

10.4.3、示例

softlight(#ff6600, #333333); // ff4100
1

10.5、hardlight

和overlay一样，但是颜色角度颠倒了。

10.5.1、参数

• 【color1】——一个overlay颜色对象
• 【color2】——一个基本对象，使结果更亮或更深的颜色

10.5.2、出参

颜色类型的值

10.5.3、示例

hardlight(#ff6600, #333333); // 662900
1

10.6、difference

在一个通道的基础上，从第一个颜色减去第二个颜色。负数是反向的。减去黑色没有变化，减去白色会导致颜色反转。

10.6.1、参数

• 【color1】——作为被减数的颜色对象
• 【color2】——作为减数的颜色对象

10.6.2、出参

颜色类型的值

10.6.3、示例

difference(#ff6600, #333333); // cc3333
1

10.7、exclusion

与低对比度下的差异效果相似。

10.7.1、参数

• 【color1】——作为被减数的颜色对象
• 【color2】——作为减数的颜色对象

10.7.2、出参

颜色类型的值

10.7.3、示例

exclusion(#ff6600, #333333); // cc7033
1

10.8、average

以每个通道（RGB）为基础计算两种颜色的平均值；

10.8.1、参数

• 【color1】——颜色对象
• 【color2】——颜色对象

10.8.2、出参

颜色类型的值

10.8.3、示例

average(#ff6600, #333333); // 994b1a
1

10.9、negation

做相反数的 difference

10.9.1、参数

• 【color1】——作为被减数的颜色对象
• 【color2】——作为减数的颜色对象

10.9.2、出参

颜色类型的值

10.9.3、示例

negation(#ff6600, #666666); // 99cc66
1

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！