逻辑功能 Logical Functions
如果 if
根据条件返回两个值之一。
参数:
condition
:布尔表达式value1
:如果condition
为true,则返回一个值。value2
:如果condition
不正确,则返回一个值。
发布:v3.0.0更新:v3.6.0
例子:
@some: foo;
div {
margin: if((2 > 1), 0, 3px);
color: if((iscolor(@some)), @some, black);
}
结果:
div {
margin: 0;
color: black;
}
注意:作为conditional
参数支持的布尔表达式与Guard Statements相同。
if(not (true), foo, bar);
if((true) and (2 > 1), foo, bar);
if((false) or (isstring("boo!")), foo, bar);
注意:在Less 3.6之前,该条件需要一组括号。
if(2 > 1, blue, green); // Causes an error in 3.0-3.5.3
if((2 > 1), blue, green); // Ok 3.0+
布尔值 boolean
评估为真或假
您可以“存储”一个布尔测试以供以后在Guard或中进行评估if()
。
参数:
condition
:布尔表达式
发布:v3.0.0更新:v3.6.0
例子:
@bg: black;
@bg-light: boolean(luma(@bg) > 50%);
div {
background: @bg;
color: if(@bg-light, black, white);
}
结果:
div {
background: black;
color: white;
}
字符串函数 String Functions
逃逸 escape
将URL编码应用于输入字符串中找到的特殊字符。
- 这些字符不编码:
,
,/
,?
,@
,&
,+
,'
,~
,!
和$
。 - 最常见的编码的字符:
\<space\>
,#
,^
,(
,)
,{
,}
,|
,:
,>
,<
,;
,]
,[
和=
。
参数::string
要转义的字符串。
返回:转义的string
内容,不带引号。
例:
escape('a=1')
输出:
a%3D1
注意:如果参数不是字符串,则未定义输出。当前实现返回undefined
颜色,而其他任何类型的参数均保持不变。不应依赖此行为,将来可能会改变。
e
字符串转义。
它期望将字符串作为参数并按原样返回其内容,但不带引号。它可用于输出无效的CSS语法的CSS值,或使用Less不能识别的专有语法。
参数:string
-要转义的字符串。
返回:string
-转义的字符串,不带引号。
例:
@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()"
filter: e(@mscode);
输出:
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
%格式 format
该函数
%(string, arguments ...)
格式化字符串。
第一个参数是带有占位符的字符串。所有占位符开始百分号%
后跟字母s
,S
,d
,D
,a
,或A
。其余参数包含替换占位符的表达式。如果您需要打印百分比符号,请用另一个百分比将其转义%%
。
如果需要将特殊字符转义为utf-8转义码,请使用大写占位符。该函数会转义除以外的所有特殊字符()'~!
。空格编码为%20
。小写的占位符保留原样的特殊字符。
占位符:
d
,D
,a
,A
-可以通过任何种类的参数(颜色,号码,转义值,表达,...)的替换。如果将它们与字符串结合使用,则将使用整个字符串-包括其引号。但是,引号按原样放置在字符串中,不能用“ /”或类似符号进行转义。s
,S
-可以用任何表达式替换。如果将它与字符串一起使用,则仅使用字符串值-省略引号。
参数:
string
:带占位符的格式字符串,anything
*:用于替换占位符的值。
返回:formatted string
。
例:
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");
输出:
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";
更换 replace
替换字符串中的文本。
发布了v1.7.0
参数:
string
:要搜索和替换的字符串。pattern
:要搜索的字符串或正则表达式模式。replacement
:用于替换匹配模式的字符串。flags
:(可选)正则表达式标志。
返回:具有替换值的字符串。
例:
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');
结果:
"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;
列表功能 List Functions
长度 length
返回值列表中的元素数。
参量
list
-用逗号或空格分隔的值列表。
例: length(1px solid #0080ff);
输出: 3
例:
@list: "banana", "tomato", "potato", "peach";
n: length(@list);
输出:
n: 4;
提取 extract
返回列表中指定位置的值。
参量
list
-用逗号或空格分隔的值列表。index
-一个整数,指定要返回的列表元素的位置。
例: extract(8px dotted red, 2);
输出: dotted
例:
@list: apple, pear, coconut, orange;
value: extract(@list, 3);
输出:
value: coconut;
范围 range
发布了v3.9.0
生成跨越一系列值的列表
参量
start
-(可选)起始值,例如1或1pxend
-最终值,例如5pxstep
-(可选)要增加的金额
例子:
value: range(4);
输出:
value: 1 2 3 4;
范围内每个值的输出将与该end
值的单位相同。例如:
value: range(10px, 30px, 10);
输出:
value: 10px 20px 30px;
每 each
发布了v3.7.0
将规则集的评估绑定到列表的每个成员。
参量
list
-用逗号或空格分隔的值列表。rules
- An anonymous ruleset/mixin
例:
@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
可变的。对于大多数列表,@key
并且@index
将被分配相同的值(数字位置,基于1)。但是,您也可以将规则集本身用作结构化列表。如:
@set: {
one: blue;
two: green;
three: red;
}
.set {
each(@set, {
@{key}-@{index}: @value;
});
}
这将输出:
.set {
one-1: blue;
two-2: green;
three-3: red;
}
当然,由于您可以为每个规则集调用使用守卫来调用带有mixin的mixin,因此这使each()
功能非常强大。
在中设置变量名称 each()
您没有使用@value
,@key
以及@index
在你的each()
功能。在Less 3.7中,Less使用该each()
函数引入了匿名混入的概念,该混入可能会在以后扩展到语法的其他部分。
一位不愿具名的混入使用的形式,#()
或.()
以开始.
或者#
就像一个普通的混入会。在中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;
});
}
预期输出:
.set-2 {
one-1: blue;
two-2: green;
three-3: red;
}
该each()
功能将在匿名混入定义的变量名和绑定他们的@value
,@key
和@index
值,按照这个顺序。如果你只写each(@list, #(@value) {})
的,则两个@key
也@index
将被定义。
for
使用range
和创建循环each
需要更少的v3.9.0
您可以for
简单地通过生成数字列表并将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 Functions
向上舍入 ceil
向上舍入到下一个最大整数。
参数:number
-浮点数。
返回值: integer
例: ceil(2.4)
输出: 3
向下舍入 floor
向下舍入到下一个最小整数。
参数:number
-浮点数。
返回值: integer
例: floor(2.6)
输出: 2
百分比 percentage
将浮点数转换为百分比字符串。
参数:number
-浮点数。
返回值: number
例: percentage(0.5)
输出: 50%
回合 round
应用舍入。
参数:
number
:浮点数。decimalPlaces
:可选:要舍入的小数位数。预设为0。
返回值: number
例: round(1.67)
输出: 2
例: round(1.67, 1)
输出: 1.7
平方根 sqrt
计算数字的平方根。保持单位不变。
参数:number
-浮点数。
返回值: number
例:
sqrt(25cm)
输出:
5cm
例:
sqrt(18.6%)
输出:
4.312771730569565%;
绝对值 abs
计算数字的绝对值。保持单位不变。
参数:number
-浮点数。
返回值: number
范例1: abs(25cm)
输出: 25cm
范例2: abs(-18.6%)
输出: 18.6%;
正弦函数 sin
计算正弦函数。
假定数字的弧度不带单位。
参数:number
-浮点数。
返回值: number
例:
sin(1); // sine of 1 radian
sin(1deg); // sine of 1 degree
sin(1grad); // sine of 1 gradian
输出:
0.8414709848078965; // sine of 1 radian
0.01745240643728351; // sine of 1 degree
0.015707317311820675; // sine of 1 gradian
反正弦(反正弦)函数 asin
计算反正弦(反正弦)函数。
返回以弧度表示的数字,例如-π/2
和之间的数字π/2
。
参数:number
-[-1, 1]
间隔中的浮点数。
返回值: number
例:
asin(-0.8414709848078965)
asin(0)
asin(2)
输出:
-1rad
0rad
NaNrad
余弦函数 cos
计算余弦函数。
假定数字的弧度不带单位。
参数:number
-浮点数。
返回值: number
例:
cos(1) // cosine of 1 radian
cos(1deg) // cosine of 1 degree
cos(1grad) // cosine of 1 gradian
输出:
0.5403023058681398 // cosine of 1 radian
0.9998476951563913 // cosine of 1 degree
0.9998766324816606 // cosine of 1 gradian
acos
计算反余弦(余弦的倒数)函数。
返回以弧度为单位的数字,例如0到π之间的数字。
参数:number
-从[-1,1]间隔开始的浮点数。
返回值: number
例:
acos(0.5403023058681398)
acos(1)
acos(2)
输出:
1rad
0rad
NaNrad
tan
计算切线函数。
假定数字的弧度不带单位。
参数:number
-浮点数。
返回值: number
例:
tan(1) // tangent of 1 radian
tan(1deg) // tangent of 1 degree
tan(1grad) // tangent of 1 gradian
输出:
1.5574077246549023 // tangent of 1 radian
0.017455064928217585 // tangent of 1 degree
0.015709255323664916 // tangent of 1 gradian
atan
计算反正切(反正切)函数。
返回以弧度表示的数字,例如-π/2
和之间的数字π/2
。
参数:number
-浮点数。
返回值: number
例:
atan(-1.5574077246549023)
atan(0)
round(atan(22), 6) // arctangent of 22 rounded to 6 decimal places
输出:
-1rad
0rad
1.525373rad;
pi
返回π(pi);
参数: none
返回值: number
例:
pi()
输出:
3.141592653589793
pow
返回提高到第二个参数的幂的第一个参数的值。
返回值的尺寸与第一个参数的尺寸相同,而第二个参数的尺寸将被忽略。
参数:
number
:base-浮点数。number
:指数-浮点数。
返回值: number
例:
pow(0cm, 0px)
pow(25, -2)
pow(25, 0.5)
pow(-25, 0.5)
pow(-25%, -0.5)
输出:
1cm
0.0016
5
NaN
NaN%
mod
返回第一个参数模数第二个参数的值。
返回的值与第一个参数的维相同,而第二个参数的维将被忽略。该功能还可以处理负数和浮点数。
参数:
number
:一个浮点数。number
:一个浮点数。
返回值: number
例:
mod(0cm, 0px)
mod(11cm, 6px);
mod(-26%, -5);
输出:
NaNcm;
5cm
-1%;
min
返回一个或多个值中的最小值。
参数:value1, ..., valueN
-一个或多个要比较的值。
返回:最小值。
例: min(5, 10);
输出: 5
例: min(3px, 42px, 1px, 16px);
输出: 1px
max
返回一个或多个值中的最大值。
参数:value1, ..., valueN
-一个或多个要比较的值。
返回:最大值。
例: max(5, 10);
输出: 10
例: max(3%, 42%, 1%, 16%);
输出: 42%
类型功能 Type Functions
isnumber
返回
true
值是否为数字,false
否则返回。
参数:value
-要评估的值或变量。
返回:true
如果value是一个数字,false
则返回。
例:
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
返回
true
值是否是字符串,false
否则返回。
参数:value
-要评估的值或变量。
返回:true
如果value是一个字符串,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
返回
true
值是否是颜色,false
否则返回。
参数:value
-要评估的值或变量。
返回:true
如果value是一种颜色,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
iskeyword
返回
true
值是否是关键字,false
否则返回。
参数:value
-要评估的值或变量。
返回:true
如果value是关键字,false
则返回。
例:
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
isurl
返回
true
值是否为URL,false
否则返回。
参数:value
-要评估的值或变量。
返回:true
如果value是一个url,false
否则返回。
例:
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
ispixel
返回
true
值是否是一个以像素为单位的数字,false
否则返回。
参数:value
-要评估的值或变量。
返回:true
如果value是一个像素,false
则返回。
例:
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
isem
返回
true
值是否为em值,false
否则返回。
参数:value
-要评估的值或变量。
返回:true
如果value是em值,false
则返回。
例:
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
ispercentage
返回
true
值是否为百分比值,false
否则返回。
参数:value
-要评估的值或变量。
返回:true
如果value是一个百分比值,false
则返回。
例:
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
isunit
返回
true
值是否是指定单位的数字,false
否则返回。
参数:
value
-被评估的值或变量。unit
-要测试的单位标识符(可选加引号)。
返回:true
如果value是指定单位的数字,false
否则返回。
例:
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
isruleset
true
如果值是规则集,false
则返回,否则返回。
参数:
value
-正在评估的变量。
返回:true
如果value是一个规则集,false
则返回。
例:
@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
杂项功能 Misc Functions
color
解析颜色,因此代表颜色的字符串成为一种颜色。
参数::string
指定颜色的字符串。
返回值: color
例: color("#aaa");
输出: #aaa
image-size
从文件获取图像尺寸。
参数::string
要获取尺寸的文件。
返回值: dimension
例: image-size("file.png");
输出: 10px 10px
注意:此功能需要由每个环境实现。当前仅在节点环境中可用。
在v2.2.0中添加
image-width
从文件获取图像宽度。
参数::string
要获取尺寸的文件。
返回值: dimension
例: image-width("file.png");
输出: 10px
注意:此功能需要由每个环境实现。当前仅在节点环境中可用。
在v2.2.0中添加
image-height
从文件获取图像高度。
参数::string
要获取尺寸的文件。
返回值: dimension
例: image-height("file.png");
输出: 10px
注意:此功能需要由每个环境实现。当前仅在节点环境中可用。
在v2.2.0中添加
convert
将数字从一个单位转换为另一个单位。
第一个参数包含一个带单位的数字,第二个参数包含一个单位。如果设备兼容,则将转换数字。如果它们不兼容,则第一个参数将原样返回。
请参阅单位以更改单位而不进行转换。
兼容的单位组:
- 长度:
m
,cm
,mm
,in
,pt
和pc
, - 时间:
s
和ms
, - 角度:
rad
,deg
,grad
和turn
。
参数:
number
:带单位的浮点数。identifier
,string
或escaped value
:单位
返回值: number
例:
convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // incompatible unit types
输出:
9000ms
140mm
8
data-iro
内联资源,
url()
如果ieCompat选项打开并且资源太大,或者您在浏览器中使用该函数,则退回到该资源。如果未提供MIME类型,则节点将使用mime包来确定正确的mime类型。
参数:
mimetype
:(可选)MIME类型字符串。url
:要内联的文件的URL。
如果没有mimetype,data-uri函数将从文件名后缀中猜测出来。文本和svg文件编码为utf-8,其他所有文件编码为base64。
如果用户提供了mimetype,则如果mimetype参数以; base64结尾,则函数使用base64。例如,image/jpeg;base64
被编码为base64,而text/html
被编码为utf-8。
例: data-uri('../data/image.jpg');
输出: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
在浏览器中输出: url('../data/image.jpg');
例: data-uri('image/jpeg;base64', '../data/image.jpg');
输出: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
例: data-uri('image/svg+xml;charset=UTF-8', 'image.svg');
输出: url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");
default
仅在警戒条件内可用,并且
true
仅在没有其他混合匹配时返回,false
否则返回。
例:
.mixin(1) {x: 11}
.mixin(2) {y: 22}
.mixin(@x) when (default()) {z: @x}
div {
.mixin(3);
}
div.special {
.mixin(1);
}
输出:
div {
z: 3;
}
div.special {
x: 11;
}
可以使用由default
保护运算符返回的值。例如,.mixin() when not(default()) {}
仅当存在至少一个与.mixin()
call匹配的mixin定义时才匹配:
.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default()) {padding: (@value / 5)}
div-1 {
.mixin(100px);
}
div-2 {
/* ... */
.mixin(100%);
}
结果:
div-1 {
width: 100px;
padding: 20px;
}
div-2 {
/* ... */
}
允许default()
在相同保护条件下或在具有相同名称的mixins的不同条件下进行多个调用:
div {
.m(@x) when (default()), not(default()) {always: @x}
.m(@x) when (default()) and not(default()) {never: @x}
.m(1); // OK
}
但是,如果Less使用以下命令检测到多个mixin定义之间可能存在冲突,则会抛出错误default()
:
div {
.m(@x) when (default()) {}
.m(@x) when not(default()) {}
.m(1); // Error
}
在上面的示例中,无法确定每个default()
调用应返回什么值,因为它们相互依赖。
高级多种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')}
}
结果:
.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;
}
该default
函数仅在警卫表达式内部可用作Less内置函数。如果在mixin保护条件之外使用,它将被解释为常规CSS值:
例:
div {
foo: default();
bar: default(42);
}
结果:
div {
foo: default();
bar: default(42);
}
unit
删除或更改尺寸单位
参数:
dimension
:数字,带或不带维。unit
:(可选)要更改为的单位,如果省略,将删除该单位。
有关转换单位的信息,请参见转换。
例: unit(5, px)
输出: 5px
例: unit(5em)
输出: 5
get-unit
返回数字的单位。
如果参数包含带单位的数字,则该函数返回其单位。不带单位的参数将导致返回一个空值。
参数:
number
:带或不带单位的数字。
例: get-unit(5px)
输出: px
例: get-unit(5)
输出: //nothing
svg-gradient
生成多级svg渐变。
SVG梯度函数生成多级SVG梯度。它必须至少具有三个参数。第一个参数指定渐变类型和方向,其余参数列出颜色及其位置。第一种和最后一种指定颜色的位置是可选的,其余颜色必须具有指定的位置。
方向必须之一to bottom
,to right
,to bottom right
,to top right
,ellipse
或ellipse at center
。方向既可以指定为转义值~'to bottom'
,也可以指定为空格分隔的单词列表to bottom
。
方向上必须跟随两个或多个色标。既可以在列表中提供它们,也可以在单独的参数中指定每种颜色的色标。
参数-颜色在列表中停止:
escaped value
或list of identifiers
:方向list
-所有颜色及其在列表中的位置
参数-颜色在参数中停止:
escaped value
或list of identifiers
:方向color [percentage]
对:第一种颜色及其相对位置(位置是可选的)color percent
对:(可选)第二种颜色及其相对位置- ...
color percent
对:(可选)第n个颜色及其相对位置color [percentage]
对:最后一种颜色及其相对位置(位置是可选的)
返回:url
具有“ URI编码” svg梯度。
示例-颜色在列表中停止:
div {
@list: red, green 30%, blue;
background-image: svg-gradient(to right, @list);
}
等效-颜色停止在参数中:
div {
background-image: svg-gradient(to right, red, green 30%, blue);
}
两者都导致:
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');
}
注意:在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>
Color Definition Functions
rgb
根据十进制的红色,绿色和蓝色(RGB)值创建不透明的颜色对象。
例如,标准HTML / CSS格式的文字颜色值也可以用于定义颜色#ff0000
。
参数:
red
:整数0-255或百分比0-100%。green
:整数0-255或百分比0-100%。blue
:整数0-255或百分比0-100%。
返回值: color
例: rgb(90, 129, 32)
输出: #5a8120
rgba
根据十进制红色,绿色,蓝色和Alpha(RGBA)值创建透明的颜色对象。
参数:
red
:整数0-255或百分比0-100%。green
:整数0-255或百分比0-100%。blue
:整数0-255或百分比0-100%。alpha
:数字0-1或百分比0-100%。
返回值: color
例: rgba(90, 129, 32, 0.5)
输出: rgba(90, 129, 32, 0.5)
argb
以
#AARRGGBB
格式(NOT#RRGGBBAA
!)创建颜色的十六进制表示形式。
此格式用于Internet Explorer以及.NET和Android开发中。
参数:color
颜色对象。
返回值: string
例: argb(rgba(90, 23, 148, 0.5));
输出: #805a1794
hsl
根据色相,饱和度和亮度(HSL)值创建不透明的颜色对象。
参数:
hue
:表示度数的0-360的整数。saturation
:百分比0-100%或数字0-1。lightness
:百分比0-100%或数字0-1。
返回值: color
例: hsl(90, 100%, 50%)
输出: #80ff00
如果要基于其他颜色的通道创建新颜色,这将很有用,例如: @new: hsl(hue(@old), 45%, 90%);
@new
将具有@old
的色调,以及其自身的饱和度和亮度。
hsla
根据色相,饱和度,亮度和Alpha(HSLA)值创建透明的颜色对象。
参数:
hue
:表示度数的0-360的整数。saturation
:百分比0-100%或数字0-1。lightness
:百分比0-100%或数字0-1。alpha
:百分比0-100%或数字0-1。
返回值: color
例: hsla(90, 100%, 50%, 0.5)
输出: rgba(128, 255, 0, 0.5)
hsv
根据色相,饱和度和值(HSV)值创建不透明的颜色对象。
请注意,这是Photoshop中可用的色彩空间,与并不相同hsl
。
参数:
hue
:表示度数的0-360的整数。saturation
:百分比0-100%或数字0-1。value
:百分比0-100%或数字0-1。
返回值: color
例: hsv(90, 100%, 50%)
输出: #408000
have
根据色相,饱和度,值和Alpha(HSVA)值创建透明的颜色对象。
请注意,这与并不相同hsla
,并且是Photoshop中可用的色彩空间。
参数:
hue
:表示度数的0-360的整数。saturation
:百分比0-100%或数字0-1。value
:百分比0-100%或数字0-1。alpha
:百分比0-100%或数字0-1。
返回值: color
例: hsva(90, 100%, 50%, 0.5)
输出: rgba(64, 128, 0, 0.5)
色彩通道功能 Color Channel Functions
hue
提取HSL颜色空间中颜色对象的色相通道。
参数:color
-颜色对象。
返回值:integer
0-360
例: hue(hsl(90, 100%, 50%))
输出: 90
saturation
提取HSL颜色空间中颜色对象的饱和度通道。
参数:color
-颜色对象。
返回值:percentage
0-100
例: saturation(hsl(90, 100%, 50%))
输出: 100%
lightness
提取HSL颜色空间中颜色对象的亮度通道。
参数:color
-颜色对象。
返回值:percentage
0-100
例: lightness(hsl(90, 100%, 50%))
输出: 50%
hsvhue
提取HSV颜色空间中颜色对象的色相通道。
参数:color
-颜色对象。
返回值: integer
0-360
例: hsvhue(hsv(90, 100%, 50%))
输出: 90
hsvsaturation
提取HSV颜色空间中颜色对象的饱和度通道。
参数:color
-颜色对象。
返回值:percentage
0-100
例: hsvsaturation(hsv(90, 100%, 50%))
输出: 100%
hsvvalue
提取HSV颜色空间中颜色对象的值通道。
参数:color
-颜色对象。
返回值:percentage
0-100
例: hsvvalue(hsv(90, 100%, 50%))
输出: 50%
red
提取颜色对象的红色通道。
参数:color
-颜色对象。
返回值:float
0-255
例: red(rgb(10, 20, 30))
输出: 10
green
提取颜色对象的绿色通道。
参数:color
-颜色对象。
返回值:float
0-255
例: green(rgb(10, 20, 30))
输出: 20
blue
提取颜色对象的蓝色通道。
参数:color
-颜色对象。
返回值:float
0-255
例: blue(rgb(10, 20, 30))
输出: 30
alpha
提取颜色对象的Alpha通道。
参数:color
-颜色对象。
返回值:float
0-1
例: alpha(rgba(10, 20, 30, 0.5))
输出: 0.5
luma
计算颜色对象的亮度(感知亮度)。
使用SMPTE C / Rec。709个系数,如WCAG 2.0中所推荐。该计算也用于对比功能中。
在v1.7.0之前,在不进行伽玛校正的情况下计算了亮度,请使用亮度函数来计算这些“旧”值。
参数:color
-颜色对象。
回报率:percentage
0-100%
例: luma(rgb(100, 200, 30))
输出: 44%
luminance
在不进行伽玛校正的情况下计算亮度值(此函数
luma
在v1.7.0之前命名)
参数:color
-颜色对象。
回报率:percentage
0-100%
例: luminance(rgb(100, 200, 30))
输出: 65%
色彩操作功能 Color Operation Functions
颜色操作通常采用与其更改的值相同的单位来表示参数,并且百分比作为绝对值处理,因此将10%的值增加10%会得出20%。将选项方法参数设置为相对百分比的相对值。当使用相对百分比时,将10%的值增加10%可得出11%。值限制在其允许范围内;他们不会四处走动。除了通常将要使用的十六进制版本外,在显示返回值的地方,我们使用的格式可以清楚地说明每个函数的功能。
saturate
将HSL颜色空间中的颜色饱和度绝对增加。
参数:
color
:颜色对象。amount
:0-100%的百分比。method
:可选,设置relative
为相对于当前值进行调整。
返回值: color
例: saturate(hsl(90, 80%, 50%), 20%)
输出: #80ff00 // hsl(90, 100%, 50%)
➜
desaturate
将HSL颜色空间中的颜色饱和度降低绝对值。
参数:
color
:颜色对象。amount
:0-100%的百分比。method
:可选,设置relative
为相对于当前值进行调整。
返回值: color
例: desaturate(hsl(90, 80%, 50%), 20%)
输出: #80cc33 // hsl(90, 60%, 50%)
➜
lighten
将HSL颜色空间中的颜色亮度绝对增加。
参数:
color
:颜色对象。amount
:0-100%的百分比。method
:可选,设置relative
为相对于当前值进行调整。
返回值: color
例: lighten(hsl(90, 80%, 50%), 20%)
输出: #b3f075 // hsl(90, 80%, 70%)
➜
arken
将HSL颜色空间中的颜色亮度绝对减少一些。
参数:
color
:颜色对象。amount
:0-100%的百分比。method
:可选,设置relative
为相对于当前值进行调整。
返回值: color
例: darken(hsl(90, 80%, 50%), 20%)
输出: #4d8a0f // hsl(90, 80%, 30%)
➜
fadein
降低颜色的透明度(或增加不透明度),使其更不透明。
对不透明的颜色没有影响。要在另一个方向上褪色,请使用fadeout
。
参数:
color
:颜色对象。amount
:0-100%的百分比。method
:可选,设置relative
为相对于当前值进行调整。
返回值: color
例: fadein(hsla(90, 90%, 50%, 0.5), 10%)
输出: rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)
fadeout
增加颜色的透明度(或减少不透明度),使其不透明性降低。要在另一个方向上褪色,请使用
fadein
。
参数:
color
:颜色对象。amount
:0-100%的百分比。method
:可选,设置relative
为相对于当前值进行调整。
返回值: color
例: fadeout(hsla(90, 90%, 50%, 0.5), 10%)
输出: rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)
fade
设置颜色的绝对不透明度。可以将其应用于颜色,无论它们是否已经具有不透明度值。
参数:
color
:颜色对象。amount
:0-100%的百分比。
返回值: color
例: fade(hsl(90, 90%, 50%), 10%)
输出: rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)
spin
沿任一方向旋转颜色的色相角。
当角度范围是0-360时,它将应用mod 360操作,因此您可以传递更大(或负)的值,并且它们将环绕,例如360和720的角度将产生相同的结果。请注意,颜色是通过RGB转换传递的,该转换不会保留灰色的色相值(因为在没有饱和度时色相没有任何意义),因此请确保以保留色相的方式应用函数,例如不要做这个:
@c: saturate(spin(#aaaaaa, 10), 10%);
改为这样做:
@c: spin(saturate(#aaaaaa, 10%), 10);
颜色始终以RGB值的形式返回,因此将其spin
应用于灰度值将无济于事。
参数:
color
:颜色对象。angle
:要旋转的度数(+或-)。
返回值: color
例:
spin(hsl(10, 90%, 50%), 30)
spin(hsl(10, 90%, 50%), -30)
输出:
#f2a60d // hsl(40, 90%, 50%)
#f20d59 // hsl(340, 90%, 50%)
➜
➜
mix
将两种颜色以可变比例混合在一起。不透明度包括在计算中。
参数:
color1
:颜色对象。color2
:颜色对象。weight
:可选,两种颜色之间的百分比平衡点,默认为50%。
返回值: color
例:
mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)
输出:
#800080
rgba(75, 25, 0, 0.75)
+
➜
tint
将颜色与白色以可变比例混合。和打电话一样
mix(#ffffff, @color, @weight)
参数:
color
:颜色对象。weight
:可选,彩色和白色之间的百分比平衡点,默认为50%。
返回值: color
例:
no-alpha: tint(#007fff, 50%);
with-alpha: tint(rgba(00,0,255,0.5), 50%);
输出:
no-alpha: #80bfff;
with-alpha: rgba(191, 191, 255, 0.75);
➜
shade
将颜色与黑色以可变比例混合。和打电话一样
mix(#000000, @color, @weight)
参数:
color
:颜色对象。weight
:可选,彩色和黑色之间的百分比平衡点,默认为50%。
返回值: color
例:
no-alpha: shade(#007fff, 50%);
with-alpha: shade(rgba(00,0,255,0.5), 50%);
输出:
no-alpha: #004080;
with-alpha: rgba(0, 0, 64, 0.75);
➜
greyscale
从HSL色彩空间中消除所有饱和度;和打电话一样
desaturate(@color, 100%)
。
由于饱和度不受色相的影响,因此所得的颜色映射可能有些暗淡或浑浊。luma
可能会提供更好的结果,因为它提取的是感知亮度而不是线性亮度,例如greyscale('#0000ff')
将返回与相同的值greyscale('#00ff00')
,尽管它们在人眼看来亮度差异很大。
参数::color
一个颜色对象。
返回值: color
例: greyscale(hsl(90, 90%, 50%))
输出: #808080 // hsl(90, 0%, 50%)
➜
请注意,即使其亮度值相同,生成的灰色看起来也比原始绿色更暗。
与使用进行比较luma
(用法不同,因为luma
返回单个值,而不是颜色):
@c: luma(hsl(90, 90%, 50%));
color: rgb(@c, @c, @c);
输出: #cacaca
➜
这次,灰色的亮度看起来与绿色差不多,尽管它的值实际上更高。
contrast
选择两种颜色中的哪一种与另一种提供最大的对比度。
这对于确保可在背景下读取颜色非常有用,对于可访问性合规性也很有用。该功能的工作方式与Compass for SASS中的对比功能相同。根据WCAG 2.0,使用经过伽玛校正的亮度值(而不是亮度)比较颜色。
可以按两种顺序提供明暗参数-该函数将计算其亮度值并自动分配明暗,这意味着您不能通过颠倒顺序来使用此函数选择对比度最低的颜色。
参数:
color
:要比较的颜色对象。dark
:可选-指定的深色(默认为黑色)。light
:可选-指定的浅色(默认为白色)。threshold
:可选-0-100%的百分比,指定从“暗”到“亮”的过渡位置(默认为43%,与SASS匹配)。这用于使对比度以一种或另一种方式偏置,例如,使您能够确定50%的灰色背景应产生黑色还是白色文本。通常,您为“较浅”的调色板设置较低的值,为“较暗”的调色板设置较高的值。
返回值: color
例:
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%);
}
输出:
p {
a: #000000 // black
b: #ffffff // white
c: #dddddd
d: #000000 // black
e: #ffffff // white
}
这些示例将上面计算的颜色用于背景和前景。您可以看到,您永远不会以白底白字或黑底黑字告终,尽管可以使用阈值来允许较低对比度的结果,如上例所示:
色彩融合功能 Color Blending Functions
这些操作与在Photoshop,Fireworks或GIMP等图像编辑器中发现的混合模式相似(尽管不一定相同),因此您可以使用它们使CSS颜色与图像匹配。
multiply
将两种颜色相乘。两种颜色中每种颜色的对应RGB通道相乘在一起,然后除以255。结果是颜色变深。
参数:
color1
:颜色对象。color2
:颜色对象。
返回值: color
例子:
multiply(#ff6600, #000000);
multiply(#ff6600, #333333);
multiply(#ff6600, #666666);
multiply(#ff6600, #999999);
multiply(#ff6600, #cccccc);
multiply(#ff6600, #ffffff);
multiply(#ff6600, #ff0000);
multiply(#ff6600, #00ff00);
multiply(#ff6600, #0000ff);
screen
做相反的事情
multiply
。结果是颜色更亮。
参数:
color1
:颜色对象。color2
:颜色对象。
返回值: color
例:
screen(#ff6600, #000000);
screen(#ff6600, #333333);
screen(#ff6600, #666666);
screen(#ff6600, #999999);
screen(#ff6600, #cccccc);
screen(#ff6600, #ffffff);
screen(#ff6600, #ff0000);
screen(#ff6600, #00ff00);
screen(#ff6600, #0000ff);
overlay
结合了的效果
multiply
和screen
。有条件地使光通道变亮,而黑暗通道变暗。注意:条件的结果由第一个颜色参数确定。
参数:
color1
:基础颜色对象。决定性颜色也可以使结果更亮或更暗。color2
:要覆盖的颜色对象。
返回值: color
例:
overlay(#ff6600, #000000);
overlay(#ff6600, #333333);
overlay(#ff6600, #666666);
overlay(#ff6600, #999999);
overlay(#ff6600, #cccccc);
overlay(#ff6600, #ffffff);
overlay(#ff6600, #ff0000);
overlay(#ff6600, #00ff00);
overlay(#ff6600, #0000ff);
softlight
类似于
overlay
但避免纯黑色导致纯黑色,而纯白色导致纯白色。
参数:
color1
:可以柔化另一个颜色的颜色对象。color2
:要柔和的彩色物体。
返回值: color
例:
softlight(#ff6600, #000000);
softlight(#ff6600, #333333);
softlight(#ff6600, #666666);
softlight(#ff6600, #999999);
softlight(#ff6600, #cccccc);
softlight(#ff6600, #ffffff);
softlight(#ff6600, #ff0000);
softlight(#ff6600, #00ff00);
softlight(#ff6600, #0000ff);
hardlight
相同,
overlay
但颜色角色相反。
参数:
color1
:要覆盖的颜色对象。color2
:基础颜色对象。决定性颜色也可以使结果更亮或更暗。
返回值: color
例:
hardlight(#ff6600, #000000);
hardlight(#ff6600, #333333);
hardlight(#ff6600, #666666);
hardlight(#ff6600, #999999);
hardlight(#ff6600, #cccccc);
hardlight(#ff6600, #ffffff);
hardlight(#ff6600, #ff0000);
hardlight(#ff6600, #00ff00);
hardlight(#ff6600, #0000ff);
difference
在逐个通道的基础上从第一种颜色中减去第二种颜色。负值取反。减去黑色不会导致变化。减去白色会导致颜色反转。
参数:
color1
:用作颜色对象的颜色对象。color2
:用作替代对象的颜色对象。
返回值: color
例:
difference(#ff6600, #000000);
difference(#ff6600, #333333);
difference(#ff6600, #666666);
difference(#ff6600, #999999);
difference(#ff6600, #cccccc);
difference(#ff6600, #ffffff);
difference(#ff6600, #ff0000);
difference(#ff6600, #00ff00);
difference(#ff6600, #0000ff);
exclusion
difference
与较低对比度类似的效果。
参数:
color1
:用作颜色对象的颜色对象。color2
:用作替代对象的颜色对象。
返回值: color
例:
exclusion(#ff6600, #000000);
exclusion(#ff6600, #333333);
exclusion(#ff6600, #666666);
exclusion(#ff6600, #999999);
exclusion(#ff6600, #cccccc);
exclusion(#ff6600, #ffffff);
exclusion(#ff6600, #ff0000);
exclusion(#ff6600, #00ff00);
exclusion(#ff6600, #0000ff);
average
以每通道(RGB)为基础计算两种颜色的平均值。
参数:
color1
:颜色对象。color2
:颜色对象。
返回值: color
例:
average(#ff6600, #000000);
average(#ff6600, #333333);
average(#ff6600, #666666);
average(#ff6600, #999999);
average(#ff6600, #cccccc);
average(#ff6600, #ffffff);
average(#ff6600, #ff0000);
average(#ff6600, #00ff00);
average(#ff6600, #0000ff);
negation
对...起到相反的作用
difference
。
结果是颜色更亮。注意:相反的效果并不意味着由于加法运算而产生的相反效果。
参数:
color1
:用作颜色对象的颜色对象。color2
:用作替代对象的颜色对象。
返回值: color
例:
negation(#ff6600, #000000);
negation(#ff6600, #333333);
negation(#ff6600, #666666);
negation(#ff6600, #999999);
negation(#ff6600, #cccccc);
negation(#ff6600, #ffffff);
negation(#ff6600, #ff0000);
negation(#ff6600, #00ff00);
negation(#ff6600, #0000ff);