快速入门
概览
变量(Variables)
混入(Mixins)
嵌套(Nesting)
运算(Operations)
转义(Escaping)
函数(Functions)
命名空间和访问符
映射(Maps)
作用域(Scope)
注释(Comments)
导入(Importing)
使用 Less.js
命令行用法
浏览器使用
Less.js选项
预加载插件
程序化使用
API
为 Less.js 做贡献
Less 函数手册
逻辑函数
字符串函数
列表函数
数学函数
类型函数
杂项函数
颜色定义函数
颜色通道函数
颜色操作函数
颜色混合函数
进阶指南
变量
父选择器
继承
合并
Mixins
CSS Guards
分离规则集
@import At-Rules
@plugin At-Rules
Maps (NEW!)
作用域
杂项函数 - Less入门文档 - 笔下光年
网站首页
杂项函数
### 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 将一个数字从一个单位转换成另一个单位。 第一个参数包含一个带单位的数字,第二个参数包含单位。如果单位兼容,数字将被转换。如果不兼容,则返回未修改的第一个参数。 请参阅单位,更改单位时无需转换。 兼容的单位组: - lengths: `m`, `cm`, `mm`, `in`, `pt` 和 `pc`, - time: `s` 和 `ms`, - angle: `rad`, `deg`, `grad` 和 `turn`. 参数: - `number`: 带单位的浮点数。 - `identifier`, `string` or `escaped value`: 单位 返回:`number` 示例: ```less convert(9s, "ms") convert(14cm, mm) convert(8, mm) // incompatible unit types ``` 输出: ```less 9000ms 140mm 8 ``` ### data-uri 内联资源,如果开启 `ieCompat` 选项且资源过大,或在浏览器中使用该函数,则返回 `url()`。如果未给出 MIME 类型,node 会使用 mime 包确定正确的 MIME 类型。 参数: - `mimetype`: (可选)MIME 类型字符串。 - `url`: 要内联的文件的 URL。 如果没有 MIME 类型,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`。 示例: ```less .mixin(1) {x: 11} .mixin(2) {y: 22} .mixin(@x) when (default()) {z: @x} div { .mixin(3); } div.special { .mixin(1); } ``` 输出: ```css div { z: 3; } div.special { x: 11; } ``` 可以将 `default` 返回的值与 guard 操作符一起使用。例如,当 `not(default()) {}` 时,`.mixin()` 只有在至少还有一个符合 `.mixin()` 调用的 mixin 定义时才会匹配: ```less .mixin(@value) when (ispixel(@value)) {width: @value} .mixin(@value) when not(default()) {padding: (@value / 5)} div-1 { .mixin(100px); } div-2 { /* ... */ .mixin(100%); } ``` 结果: ```less div-1 { width: 100px; padding: 20px; } div-2 { /* ... */ } ``` 允许在同一保护条件下或同名混合脚的不同条件下多次调用 `default()`: ```less div { .m(@x) when (default()), not(default()) {always: @x} .m(@x) when (default()) and not(default()) {never: @x} .m(1); // OK } ``` 但是,如果 Less 检测到使用 `default()` 的多个 mixin 定义之间存在潜在冲突,就会出错: ```less div { .m(@x) when (default()) {} .m(@x) when not(default()) {} .m(1); // Error } ``` 在上述示例中,无法确定每次调用 `default()` 时应返回什么值,因为它们相互递归依赖。 高级多个 `default()` 使用: ```less .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')} } ``` 结果: ```less .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; } ``` 默认函数只能在保护表达式中作为 Less 内置函数使用。如果在混合型保护条件之外使用,则会被解释为正则 CSS 值: 示例: ```less div { foo: default(); bar: default(42); } ``` 结果: ```less div { foo: default(); bar: default(42); } ``` ### unit 删除或更改标注的单位。 参数: - `dimension`:一个数字,包含或不包含标注。 - `unit`: (可选)要更改的单位,如果省略将删除单位。 请参阅 [convert](http://www.bixiaguangnian.com/manual/less/1119.html#h3-convert "convert") 转换单位。 示例:`unit(5, px)` 输出: `5px` 示例:`unit(5em)` 输出: `5` ### get-unit 返回一个数字的单位。 如果参数包含一个有单位的数字,函数将返回其单位。如果参数不带单位,则返回空值。 参数: - number`:带或不带单位的数字。 示例:`get-unit(5px)` 输出: `px` 示例:`get-unit(5)` 输出: `//nothing` ### svg-gradient 生成多停止点 svg 渐变。 Svg-gradient 函数生成多停止点的 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]` pair: 第一种颜色及其相对位置(位置为可选项) - `color percent` pair: 第二种颜色及其相对位置(位置为可选项 - ... - `color percent` pair:(可选)第 n 种颜色及其相对位置 - `color [percentage]` pair: 最后一种颜色及其相对位置(位置为可选项) 返回:`url` 与 "URI-Encoded" svg 渐变。 示例 - 列表中的色块: ```less div { @list: red, green 30%, blue; background-image: svg-gradient(to right, @list); } ``` equivalent - 参数中的色块: ```less div { background-image: svg-gradient(to right, red, green 30%, blue); } ``` 都会导致: ```less 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: ```html <?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> ```
上一篇:
类型函数
下一篇:
颜色定义函数