冲浪网站优化网立足洛阳是国内知名SEO服务商,是网站优化SEO学习,SEO技巧方法知识获取重要平台,提供高效的SEO及网站优化解决方案,提高目标网站的网站排名。

全国热线电话:13633878273

冲浪网站优化 / Products Center

LESS杂项函数

发布时间: 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
 

上一条:LESS运算及函数

下一条:LESS字符串函数