less中的函数

2022-01-04 14:32:28 作者：互联网

#逻辑函数

(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

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

@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()" 
filter: e(@mscode);
//输出
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

%(string, arguments ...)

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

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

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

参数：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()

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

兼容的单元组：

长度：m, cm, mm, in,pt和pc,时间：s和ms，角度：rad，deg，grad和turn。

参数：number: 带单位的浮点数。identifier,string或escaped 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 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] 对：第一种颜色及其相对位置（位置是可选的）
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%

标签：输出,颜色,函数,less,default,value,参数,mixin
来源： https://blog.csdn.net/weixin_53917307/article/details/122296819