全国热线电话:13633878273
发布时间: 2014-11-29 16:36:52
color
解析颜色,将代表颜色的字符串转换为颜色值.
参数: string: 代表颜色值的字符串。
返回值: color
案例: color("#aaa");
输出: #aaa
convert
将数字从一种单位转换到另一种单位。
第一个参数为带单位的数值,第二个参数为单位。如果两个参数的单位是兼容的,则数字的单位被转换。如果两个参数的单位不兼容,则原样返回第一个参数。
参见 unit 不做转换的情况下改变单位
兼容的单位是:
长度: m, cm, mm, in, pt and pc,
时间: s and ms,
角度: rad, deg, grad and turn.
参数:
number: 带单位浮点数。
identifier, string or escaped value: units
返回值: number
案例:
convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // incompatible unit types
输出:
9000ms
140mm
8
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 convert for changing the unit without conversion.
案例: unit(5, px)
输出: 5px
案例: unit(5em)
输出: 5