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

N注意:每个环境都需要执行该功能。目前仅在节点环境中可用。

添加到: v2.2.0

image-height

从文件中获取图像高度。

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

返回: dimension

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

输出: 10px

注意:每个环境都需要执行此功能。目前仅在节点环境中可用。

添加到: v2.2.0

convert

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

data-uri

内联资源,如果开启了 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");

default

仅在保护条件中可用,只有在没有其他匹配的 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);
}

unit

删除或更改标注单位

参数:

  • dimension: 一个数字,带或不带维度。

  • unit: (可选)要转换的单位,如果省略则会删除单位。

请参阅转换,通过转换更改单位。

示例: unit(5, px)

输出: 5px

示例: unit(5em)

输出: 5

get-unit

返回一个数字的单位。

如果参数包含一个有单位的数字,函数将返回其单位。如果参数不带单位,则返回空值。

参数:

  • number: 有单位或无单位的数字。

示例: get-unit(5px)

输出: px

示例: get-unit(5)

输出: //nothing

svg-gradient

生成多停止点 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>


说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号