less中的函数

#逻辑函数

  • (if(condition),value1,value2);
if(not (true), foo, bar);
if((true) and (2 > 1), foo, bar);
if((false) or (isstring("boo!")), foo, bar);
  • boolean()可以存储一个布尔值
@bg: black;
@bg-light: boolean(luma(@bg) > 50%);

div {
  background: @bg; 
  color: if(@bg-light, black, white);
}

#字符串函数

  • escape()

        转义:将url编码应用于输入字符串中的特殊字符。

escape('a=1')
//输出
a%3D1
  • e()

        字符串转义:期望字符串作为参数并按原样返回其内容,但不带引号。它可用于输出不是有效 CSS 语法的 CSS 值,或者使用 Less 无法识别的专有语法。

@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()" 
filter: e(@mscode);
//输出
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
  • %(string, arguments ...)

         格式化字符串:第一个参数是带有占位符的字符串,所有占位符都以百分比符号%开头,后跟字母 s、SdDa、 或A,其余参数包含替换占位符的表达式。

        如果您需要将特殊字符转义为其 utf-8 转义码,请使用大写占位符。该函数转义除()'~!.之外的所有特殊字符。空间被编码为%20. 小写占位符保留特殊字符原样。        

        占位符:dDaA- 可以替换为任何类型的参数(颜色、数字、转义值、表达式等)。如果将它们与字符串结合使用,则将使用整个字符串 - 包括其引号。但是,引号按原样放置在字符串中,它们不会被“/”或任何类似的东西转义。sS- 可以替换为任何表达式。如果将它与字符串一起使用,则仅使用字符串值 - 省略引号。

        参数:string: 带占位符的格式字符串,anything* : 替换占位符的值。

format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");
//输出
format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";
  • replace()

        替换字符串中的文本    

        参数:string: 要搜索和替换的字符串。pattern:要搜索的字符串或正则表达式模式。                            replacement: 用来替换匹配模式的字符串。flags:(可选)正则表达式标志。

replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');
//输出
"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;

#列表函数

  • length()

         返回值列表中的元素数。参数:list - 逗号或空格分隔的值列表。

@list: "banana", "tomato", "potato", "peach";
n: length(@list);
//输出
n: 4;
  • extract()

        返回列表中指定位置的值。

  参数:list - 逗号或空格分隔的值列表。index - 一个整数,指定要返回的列表元素的位置。

@list: apple, pear, coconut, orange;
value: extract(@list, 3);
//输出
value: coconut;//从1起始
  • range()

        生成一个跨越一系列值的列表 。

        参数:start-(可选)起始值,例如 1 或 1px。end- 结束值,例如 5px。step - (可选)增加的数量。

        范围内每个值的输出将与该end值具有相同的单位。

value: range(10px, 30px, 10);
//输出
value: 10px 20px 30px;
  • each()

       1、 将规则集的评估绑定到列表的每个成员。

        参数:list - 逗号或空格分隔的值列表。rules - 一个匿名的规则集/ mixin。

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});
//输出
.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}

       2、 默认情况下,每一个规则集的约束,每个列表构件,一个@value@key@index变量。对于大多数列表,@key并且@index将被分配相同的值(数字位置,基于1)。但是,您也可以将规则集本身用作结构化列表。

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}
//输出
.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}

        3、设置变量名,你不必在你的each()功能中使用@value@key以及@index,在 Less 3.7 中,随着each()函数,Less 引入了匿名 mixin 的概念,它可能会在以后扩展到语法的其他部分。

        匿名 mixin 使用#().()开头的形式.#就像常规 mixin 一样。

.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Call mixin and iterate each rule
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}
//输出
.set-2 {
  one-1: blue;
  two-2: green;
  three-3: red;
}

        该each()函数将采用匿名 mixin 中定义的变量名称,并将它们按顺序绑定到@value,@key@index值。如果你只写each(@list, #(@value) {}),那么@key@index都不会被定义。

  • 使用range和each创建for循环

        您可以for简单地通过生成数字列表并将each其扩展为规则集来模拟循环。

each(range(4), {
  .col-@{value} {
    height: (@value * 50px);
  }
});
//输出
.col-1 {
  height: 50px;
}
.col-2 {
  height: 100px;
}
.col-3 {
  height: 150px;
}
.col-4 {
  height: 200px;
}

#数学函数

  • ceil() 

        向上舍入到下一个最高整数。  例子: ceil(2.4)   输出: 3

  • floor()

        向下舍入到下一个最小整数。  例子: floor(2.6)   输出: 2

  •  percentage()

        将浮点数转换为百分比字符串。例子: percentage(0.5)        输出: 50%

  •  round()

        适用四舍五入。

        参数:number: 一个浮点数。decimalPlaces:可选:四舍五入的小数位数,默认为 0。

        返回: number

        例子: round(1.67)        输出: 2

        例子: round(1.67, 1)        输出: 1.7

  •  sqrt()

        计算一个数的平方根。保持单位不变。例子:sqrt(25cm)        输出:5cm

  •  abs()

        计算一个数的绝对值,保持单位不变。

 #类型函数

        isnumber()数字、isstring()字符串、iscolor()颜色、iskeyword()关键字、isurl()地址、ispixel()以像素为单位的数字、isem()是 em 值、ispercentage()百分比值、isunit(value,unit)是指定单位的数字、isruleset()是规则集

#混杂函数

  • color()

        解析颜色,表示颜色的字符串变成颜色。

  • image-size()

        从文件中获取图像尺寸。

  • image-width()

        从文件中获取图像宽度。

  • image-height()

        从文件中获取图像高度。

  •   convert()

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

        兼容的单元组:

                长度:mcmmmin,ptpc,时间:sms,角度:raddeggradturn

                参数:number: 带单位的浮点数。identifier,stringescaped value: 单位。

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // incompatible unit types
//输出
9000ms
140mm
8
  •  data-uri() 

        参数:mimetype:(可选)一个 MIME 类型字符串。url: 要内联的文件的 URL。

         如果没有 mimetype,data-uri 函数会从文件名后缀中猜测它。文本和 svg 文件编码为 utf-8,其他任何编码为 base64。如果用户提供了 mimetype,并且 mimetype 参数以 ;base64 结尾,则该函数使用 base64。例如,image/jpeg;base64被编码为 base64 而text/html被编码为 utf-8。

  • default() 

        1、仅在守卫条件内可用,只有在没有其他混合匹配时才返回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;
}

        2、可以在守卫操作符中使用default() 返回的值。例如,.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 {
  /* ... */
}

        3、允许default()在同一个保护条件或同名 mixin 的不同条件下进行多次调用

div {
  .m(@x) when (default()), not(default())    {always: @x}
  .m(@x) when (default()) and not(default()) {never:  @x}
  .m(1); // OK
}

        4、高级多重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 内置函数提供。如果在 mixin 保护条件之外使用,它会被解释为常规 CSS 值。

  • unit()

        删除或更改尺寸单位。    

        参数:dimension: 一个数字,有或没有维度。unit:(可选)要更改的单位,或者如果省略它将删除该单位。        

        例子: unit(5, px)        输出: 5px

  •  get-unit()

        返回数字的单位。如果参数包含带单位的数字,则函数返回其单位。没有单位的参数会导致一个空的返回值。 

        参数:number: 带或不带单位的数字。

        例子: get-unit(5px)  输出: px

  •  svg-gradient()

        生成多站 svg 渐变。它必须至少具有三个参数,第一个参数指定渐变类型和方向,其余参数列出颜色及其位置。第一个和最后一个指定颜色的位置是可选的,其余颜色必须指定位置。

        方向必须是to bottomto rightto bottom rightto top rightellipseellipse at center 之一。方向可以指定为转义值~'to bottom'和空格分隔的单词列表to bottom

        方向必须跟随两个或多个色标。它们可以在列表中提供,也可以在单独的参数中指定每个色标。  

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

  • escaped valuelist of identifiers:方向
  • list - 所有颜色及其在列表中的位置

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

  • escaped valuelist of identifiers:方向
  • color [percentage] 对:第一种颜色及其相对位置(位置是可选的)
  • color percent 对:(可选)第二种颜色及其相对位置
  • ...
  • color percent 对:(可选)第 n 个颜色及其相对位置
  • color [percentage] 对:最后一种颜色及其相对位置(位置是可选的)

返回:带有“URI 编码”的svg 渐变的 url

#颜色定义函数 

  • rgb(red,green,blue) 

        根据十进制红色、绿色和蓝色 (RGB) 值创建不透明颜色对象。 

  • rgba(red,green,blue,alpha) 

        从十进制红色、绿色、蓝色和 alpha (RGBA) 值创建透明颜色对象。 

  • argb(color|颜色对象) 

        以#AARRGGBB格式(不是 #RRGGBBAA!)创建颜色的十六进制表示。此格式用于 Internet Explorer、.NET 和 Android 开发。

        参数:color,颜色对象。        返回: string

        例子: argb(rgba(90, 23, 148, 0.5));        输出: #805a1794

  •  hsl(hue,saturation,lightness)

        根据色调、饱和度和亮度 (HSL) 值创建不透明颜色对象。     

        参数:hue:代表度数的 0-360 整数。saturation:百分比 0-100% 或数字 0-1。lightness:百分比 0-100% 或数字 0-1。

        例子: hsl(90, 100%, 50%)        输出: #80ff00

        如果您想根据另一种颜色的通道创建新颜色,这很有用,例如: @new: hsl(hue(@old), 45%, 90%),@new将有@old色调,以及它自己的饱和度和亮度。

  • hsla(hue,saturation,lightness,alpha)

         根据色调、饱和度、亮度和 alpha (HSLA) 值创建透明颜色对象。

        例子: hsla(90, 100%, 50%, 0.5)        输出: rgba(128, 255, 0, 0.5)

  • hsv(hue,saturation,value)

        根据色调、饱和度和值 (HSV) 值创建不透明颜色对象。这是 Photoshop 中可用的色彩空间,与hsl不一样。 

  • hsva(hue,saturation,value,alpha)

     根据色调、饱和度、值和 Alpha (HSVA) 值创建透明颜色对象。这与 hsla 不同,它是 Photoshop 中可用的颜色空间。

 #颜色通道函数

  • luma() 

         计算颜色对象亮度(感知亮度)。该计算也用于对比度函数。

        例子: luma(rgb(100, 200, 30))        输出: 44%

上一篇:Vue (11) — mixin混入、插件、scoped样式


下一篇:Eclipse+Maven创建webapp项目<二> (转)