解析颜色,使代表颜色的字符串成为一种颜色。
参数: string:指定颜色的字符串。
返回: color
示例: color("#aaa");
输出: #aaa
从文件中获取图像尺寸。
参数: string:要获取尺寸的文件。
返回: dimension
示例: image-size("file.png");
输出: 10px 10px
注意:每个环境都需要执行此功能。目前仅在节点环境中可用。
添加到: v2.2.0
从文件获取图像宽度。
参数: string:要获取尺寸的文件。
返回: dimension
示例: image-width("file.png");
输出: 10px
N注意:每个环境都需要执行该功能。目前仅在节点环境中可用。
添加到: v2.2.0
从文件中获取图像高度。
参数: string:要获取尺寸的文件。
返回: dimension
示例: image-height("file.png");
输出: 10px
注意:每个环境都需要执行此功能。目前仅在节点环境中可用。
添加到: v2.2.0
C将一个数字从一个单位反转为另一个单位。
第一个参数包含一个带单位的数字,第二个参数包含单位。如果单位兼容,数字将被转换。如果不兼容,则返回未修改的第一个参数。
请参阅单位,更改单位时无需转换。
兼容单位组:
长度:m、cm、mm、in、pt 和 pc
时间:s 和 ms
角度:rad、deg、grad 和 turn
参数:
number: 带单位的浮点数。
标识符、字符串或转义值:单位
返回: number
示例:
convert(9s, "ms") convert(14cm, mm) convert(8, mm) // incompatible unit types
输出:
9000ms 140mm 8
内联资源,如果开启了 ieCompat 选项且资源过大,或者在浏览器中使用了该函数,则返回 url()。如果未给出 MIME 类型,node 会使用 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");
仅在保护条件中可用,只有在没有其他匹配的 mixin 时才返回 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; }
在使用 guard 操作符时,可以使用默认返回的值。例如,.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%); }
输出:
div-1 { width: 100px; padding: 20px; } div-2 { /* ... */ }
允许在同一保护条件下或同名混合脚的不同条件下多次调用 default():
div { .m(@x) when (default()), not(default()) {always: @x} .m(@x) when (default()) and not(default()) {never: @x} .m(1); // OK }
但是,如果 Less 检测到使用 default() 的多个 mixin 定义之间存在潜在冲突,就会出错:
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 内置函数使用。如果在混合防护条件之外使用,则会被解释为正则 CSS 值:
示例:
div { foo: default(); bar: default(42); }
输出:
div { foo: default(); bar: default(42); }
删除或更改标注单位
参数:
dimension: 一个数字,带或不带维度。
unit: (可选)要转换的单位,如果省略则会删除单位。
请参阅转换,通过转换更改单位。
示例: unit(5, px)
输出: 5px
示例: unit(5em)
输出: 5
返回一个数字的单位。
如果参数包含一个有单位的数字,函数将返回其单位。如果参数不带单位,则返回空值。
参数:
number: 有单位或无单位的数字。
示例: get-unit(5px)
输出: px
示例: get-unit(5)
输出: //nothing
生成多停止点 svg 梯度。
Svg-gradient 函数生成多重停止的 svg 梯度。它必须至少有三个参数。第一个参数指定渐变类型和方向,其余参数列出颜色及其位置。第一个和最后一个指定颜色的位置是可选的,其余颜色必须指定位置。
方向必须是向下、向右、向右下方、向右上方、椭圆或椭圆居中。方向既可以指定为转义值 ~'至底部',也可以指定为以空格分隔的 "至底部 "字样列表。
方向后必须有两个或两个以上的色站。它们可以在一个列表中提供,也可以在单独的参数中指定每个色块。
参数 - 颜色在列表中停止:
转义值或标识符列表:方向
list - 所有颜色及其在列表中的位置
参数 - 在参数中颜色停止:
转义值或标识符列表: 方向
颜色 [百分比] 对: 第一种颜色及其相对位置(位置为可选项)
颜色百分比对:(可选)第二种颜色及其相对位置
...
颜色百分比对:(可选)第 n 种颜色及其相对位置
颜色 [百分比] 对:最后一种颜色及其相对位置(位置为可选项)
返回:带有 "URI-Encoded" svg 渐变的 url。
示例-颜色停止列表:
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>