Misc Functions

颜色（color）

解析颜色，将表示颜色的字符串转换为颜色。

参数：string：指定颜色的字符串。

返回值：color

示例：color("#aaa");

输出：#aaa

图像尺寸（image-size）

从文件中获取图像尺寸。

参数：string：要获取尺寸的文件。

返回值：dimension

示例：image-size("file.png");

输出：10px 10px

注意：此函数需要由每个环境实现。目前仅在 node 环境中可用。

添加于：v2.2.0

图像宽度（image-width）

从文件中获取图像宽度。

参数：string：要获取尺寸的文件。

返回值：dimension

示例：image-width("file.png");

输出：10px

注意：此函数需要由每个环境实现。目前仅在 node 环境中可用。

添加于：v2.2.0

图像高度（image-height）

从文件中获取图像高度。

参数：string：要获取尺寸的文件。

返回值：dimension

示例：image-height("file.png");

输出：10px

注意：此函数需要由每个环境实现。目前仅在 node 环境中可用。

添加于：v2.2.0

转换（convert）

将一个单位的数字转换为另一个单位。

第一个参数包含带单位的数字，第二个参数包含单位。如果单位兼容，则转换数字。如果它们不兼容，则返回未修改的第一个参数。

有关更改单位而不进行转换的信息，请参见 unit。

兼容的单位组：

长度：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) // 不兼容的单位类型

输出：

9000ms
140mm
8

data-uri

内联资源，并在 ieCompat 选项开启且资源过大，或在浏览器中使用该函数时回退到 url()。如果未给出 MIME 类型，则 node 使用 mime 包确定正确的 MIME 类型。

参数：

mimetype：（可选）MIME 类型字符串。
url：要内联的文件的 URL。

如果没有 MIME 类型，data-uri 函数会从文件名后缀猜测它。文本和 svg 文件编码为 utf-8，其它任何文件编码为 base64。

如果用户提供了 MIME 类型，则该函数将使用提供的 MIME 类型。

如果 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

仅在 guard 条件内可用，仅在没有其它 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;
}

可以使用 default 返回的值与 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 {
  /* ... */
}

允许在相同的 guard 条件或具有相同名称的 mixin 的不同条件中进行多个 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");
  }
}

.mixin(@color) when (default()) {
  .m(default-string);
}
.mixin(@color) when (default(@color)) {
  .m(@color);
}
.mixin(blue);
.mixin(green);
.mixin(foo);
.mixin(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 函数只能在 mixin guard 条件中使用。如果在 mixin guard 条件之外使用，它会被解释为普通的 CSS 值。

示例：

div {
  foo: default();
  bar: default(42);
}

输出：

div {
  foo: default();
  bar: default(42);
}

unit

移除或更改尺寸的单位。

参数：

dimension：一个带或不带单位的数字。
unit：（可选）要更改为的单位，如果省略，则会移除单位。

有关使用转换更改单位，请参见 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 来指定。

方向后必须跟随两个或更多颜色停止。它们可以在列表中提供，也可以在单独的参数中指定每个颜色停止。

参数 - 颜色停止在列表中：

转义值 或 标识符列表：方向
列表 - 所有颜色及其位置的列表

参数 - 颜色停止在参数中：

转义值 或 标识符列表：方向
颜色 [百分比] 对：第一个颜色及其相对位置（位置是可选的）
颜色百分比 对：（可选）第二个颜色
颜色百分比 对：（可选）第 n 个颜色及其相对位置
颜色[百分比] 对：最后一个颜色及其相对位置（位置可选）

返回：带有“URI 编码”的 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>

Misc Functions

颜色（color）​

图像尺寸（image-size）​

图像宽度（image-width）​

图像高度（image-height）​

转换（convert）​

data-uri​

default​

unit​

get-unit​

svg-gradient​

颜色（color）

图像尺寸（image-size）

图像宽度（image-width）

图像高度（image-height）

转换（convert）

data-uri

default

unit

get-unit

svg-gradient