color
解析颜色,将代表颜色的字符串转换为颜色值.
参数: string
: 代表颜色值的字符串。
返回值: color
案例: color("#aaa");
输出: #aaa
convert
将数字从一种单位转换到另一种单位。
第一个参数为带单位的数值,第二个参数为单位。如果两个参数的单位是兼容的,则数字的单位被转换。如果两个参数的单位不兼容,则原样返回第一个参数。
参见 不做转换的情况下改变单位
兼容的单位是:
- 长度:
m
,cm
,mm
,in
,pt
andpc
, - 时间:
s
andms
, - 角度:
rad
,deg
,grad
andturn
.
参数:
number
: 带单位浮点数。identifier
,string
orescaped value
: units
返回值: number
案例:
convert(9s, "ms")convert(14cm, mm)convert(8, mm) // incompatible unit types
输出:
9000ms140mm8
data-uri
将资源内联进样式表,如果开启了 ieCompat 选项并且资源太大,或者此函数的运行环境为浏览器,则会回退到直接使用
url()
。如果没有指定 MIME,则 node 将使用 mime 包来决定正确的 mime 类型。
参数:
mimetype
: (可选) MIME 字符串。url
: 需要内嵌的文件的 URL 。
案例: 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==');
default
Available only inside guard conditions and returns
true
only if no other mixin matches,false
otherwise.
案例:
.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;}
It is possible to use the value returned by default
with guard operators. For example .mixin() when not(default()) {}
will match only if there's at least one more mixin definition that matches.mixin()
call:
.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 { /* ... */}
It is allowed to make multiple default()
calls in the same guard condition or in a different conditions of a mixins with the same name:
div { .m(@x) when (default()), not(default()) { always: @x} .m(@x) when (default()) and not(default()) {never: @x} .m(1); // OK}
However Less will throw a error if it detects a potential conflict between multiple mixin definitions using default()
:
div { .m(@x) when (default()) { } .m(@x) when not(default()) { } .m(1); // Error}
In above example it is impossible to determine what value each default()
call should return since they recursively depend on each other.
Advanced multiple default()
usage:
.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;}
The default
function is available as a Less built-in function only inside guard expressions. If used outside of a mixin guard condition it is interpreted as a regular CSS value:
案例:
div { foo: default(); bar: default(42);}
输出:
div { foo: default(); bar: default(42);}
unit
删除或更换单位。
参数:
dimension
: 带单位或不带单位的数字。unit
: (可选) 目标单位,如果省略此参数,则删除单位。
See for changing the unit without conversion.
案例: unit(5, px)
输出: 5px
案例: unit(5em)
输出: 5