ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

less中的函数

2022-01-04 14:32:28  阅读：189  来源： 互联网

标签：输出 颜色 函数 less default value 参数 mixin


#逻辑函数

  • (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、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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有