Less 2-1 内置函数

原创 于 2025-04-23 13:36:38 发布 · 902 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#less #前端 #css

在这里插入图片描述

注意

【1 语法格式】函数名后不能有空格，否则会报错。

if() // 正确写法
if () // 这样写会报错

类：逻辑函数

boolean()

【语法】

/**
 * @brief: 输出一个布尔值。
 * @param {*} 布尔表达式
 * @return {boolean} 根据布尔表达式，返回 true 或 false。
 */
boolean(布尔表达式)

【版本】发布 v3.0.0；更新 v3.6.0

【场景】常用于 if() 的第1参数。条件判断复用。

【示例】
示例源码
（1）返回布尔类型值；

@bg: black;
@bg-light: boolean(luma(@bg) > 50%);

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

/*
div {
  background: black;
  color: white;
}
*/

if()

【语法】

/**
 * @brief: 根据条件判断，选择性返回2个值中的一个。
 * @param {boolean} 条件判断（逻辑表达式；函数返回值）
 * @return {any}
 * 		条件为 true 时，返回参数2。
 * 		条件为 false 时，返回参数3。
 */
if(条件判断, true返回值, false 返回值)

【条件表达式】
布尔类型的参数；

if(not (true), foo, bar);
if((true) and (2 > 1), foo, bar);
if((false) or (isstring("boo!")), foo, bar);

【版本】发布 v3.0.0；更新 v3.6.0

【示例】
示例源码

（1）不同条件，输出不同的颜色值；

@some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), @some, black);
}
/*
div {
    margin: 0;
    color:  black;
}
*/

【注意1】less 3.6 之前，条件表达式需要添加括号。

if(2 > 1, blue, green);   // 3.0-3.5.3 会报错
if((2 > 1), blue, green); // 3.6+ 可以这样写

类：字符串函数

escape()

【语法】

/**
 * @brief: 对输入字符串中的特殊字符 应用 URL 编码。
 * @param {string} 携带特殊字符，待处理的字符串
 * @return {string} 返回编码后的字符串。
 */
escape(str)

【不会编码的字符】这些特殊符号不会被编码：

,  /  ?  @  &  +  '  ~  !  $

【最常见的需要编码的字符】

空格  #  ^  (  )  {  }  |  :  >  <  ;  [  ]  =

【示例】
示例源码
（1）给 = 编码；

div {
  content: escape('a=1');
}
/*
tip: 这样的写法 CSS 中会报语法错误，这里只是辅助理解。
div {
  content: a%3D1;
}
*/

（2） / 不会被编码；

span {
  content: escape('b/2');
}
/*
span {
  content: b/2;
}
*/

【tip】如果参数不是字符串，则没有定义输出。
当前的实现对颜色返回 undefined，对任何其他类型的参数返回未定义的输入。
这种行为不应该被依赖，并且将来可能会改变。

e()

【语法】

/**
 * @brief: 字符串转义。
 * @param {string} 一个字符串
 * @return {string} 转义后的字符串（不带引号）
 */
e(str)

【说明】
它需要字符串作为参数，并原样返回其内容，但不带引号。
它可以用来输出 CSS 值，这些值要么是无效的语法，要么使用 Less 无法识别的专有语法。

【示例】
示例源码
（1）转义一段字符串；

@mscode: 'ms:alwaysHasItsOwnSyntax.For.Stuff()';

div {
  content: e(@mscode);
}

/*
@mscode: 'ms:alwaysHasItsOwnSyntax.For.Stuff()';

div {
  content: e(@mscode);
}
*/

%()

语法

/**
 * @brief: 用来格式化一个字符串。
 * @param {string} 详细见下面
 */
%(string, arguments...)

参数1 string

【参数1】string
第1参数是 带占位符的 字符串。
所有占位符都以 % 符号开头，后面跟随字母 s, S, d, D,a, A。

【特殊1】%占位符
若需要打印百分比符号，使用 %%。

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

【占位符】d, D, a , A
可以被任何类型的参数（颜色，数字，转义值，表达式，…）代替。
如果将它们与 string 组合使用，则会使用整个字符串，包括它的引号。
然而，引号被原样放置到字符串中，它们不会被 / 或任何类似的转义。

【占位符】s, S
可以被任何表达式代替。
如果与 string 一起使用，则只使用字符串值，引号被省略。

其余参数

{any} arguments…
其余多个参数，是替换站位符的表达式或字符串。

返回

格式化后的字符串

示例

示例源码

（1）字符串格式化；

.d1 {
  content: %('repetitions: %a file: %d', 1 + 2, 'directory/file.less');
}
.d2 {
  content: %('repetitions: %A file: %D', 1 + 2, 'directory/file.less');
}
.d3 {
  content: %('repetitions: %s file: %s', 1 + 2, 'directory/file.less');
}
.d4 {
  content: %('repetitions: %S file: %S', 1 + 2, 'directory/file.less');
}

/*
.d1 {
  content: 'repetitions: 3 file: 'directory/file.less'';
}
.d2 {
  content: 'repetitions: 3 file: 'directory%2Ffile.less'';
}
.d3 {
  content: 'repetitions: 3 file: directory/file.less';
}
.d4 {
  content: 'repetitions: 3 file: directory%2Ffile.less';
}
*/

replace()

【语法】

/**
 * @brief: 替换字符串。
 * @param {string} str 要搜索和替换的字符串。
 * @param {regexp} pattern 要替换掉的字符串 / 正则表达式模式。
 * @param {string} replacement 要替换匹配模式的字符串。
 * @param {string} [flags] （可选）正则表达式标志。
 * @return {string} 替换后的值。
 */
replace(str, pattern, replacement, [flags])

【版本】发布 v1.7.0

【示例】
示例源码
(1) api 使用；

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()

【语法】

/**
 * @brief: 返回值列表中元素的个数。
 * @param {list} list 以逗号或空格分隔的值列表。
 * @return {number} 数值
 */
length(list)

【示例】
示例源码

@list: 'banana', 'tomato', 'potato', 'peach';

.d1 {
  content: length(@list);
}

/*
.d1 {
  content: 4;
}
*/

extract()

【语法】

/**
 * @brief: 返回列表中指定位置的值。
 * @param {list} list 以逗号或空格分隔的值列表。
 * @param {int} index 一个整数，指定要返回的列表元素的位置。
 * @return {any} 指定位置的值
 */
extract(list, index)

【示例】
示例源码

@list: apple, pear, coconut, orange;

.d1 {
  content: extract(@list, 3);
}

/*
.d1 {
  content: coconut;
}
*/

range()

【语法】

/**
 * @brief: 生成一个 包含一系列值的列表。
 * @param {string} start 可选，起始值，例如 1 或 1px。
 * @param {string} end 结束值，例如 5px。
 * @param {int} step 可选，增量值。
 * @return {*} 生成的值（一个列表）
 */
range(start, end, step)

【版本】发布 v3.9；

【示例】
示例源码

.d1 {
  content: range(4);
}

.d2 {
  content: range(10px, 50px, 10);
}

/*
.d1 {
  content: 1 2 3 4;
}
.d2 {
  content: 10px 20px 30px 40px 50px;
}
*/

each()

语法

/**
 * @brief: 将规则集的求值绑定到列表的每个成员（循环 list 列表并做一些处理）。
 * @param {list} list 一组列表值。
 * @param {*} rules 匿名规则集/mixin。
 * @return {*} 循环遍历生成样式代码
 */
range(list, rules)

【版本】发布 v3.7；

【示例1】
示例源码

@selectors: blue, green, red;

each(@selectors, {
    .sel-@{value} {
      a: b;
    }
});

/*
.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}
*/

【语法规则】
变量用在选择器上时，变量名称需要用 {} 包裹。例如：.sel-@{value}
变量用作值时，直接使用。@value;

【each 循环变量】
@value：当前列表循环项的 值；
@key： ~ 标识；
@index： ~ 序列号；

tip: 对于大多数列表，@key、@index 将被分配相同的值（数值位置，从1开始）。

【示例2】示例源码

@selectors: red yellow blue;

each(@selectors, {
    .button-@{key}-@{index}-@{value} {
      color: @value;
    }
});

/*
.button-1-1-red {
  color: red;
}
.button-2-2-yellow {
  color: yellow;
}
.button-3-3-blue {
  color: blue;
}
*/

【特殊的参数】使用 规则集本身 （变量为一组样式规则，理解成一组 CSS 样式写法） 作为结构化列表。
【示例3】示例源码

@set: {
  one: blue;
  two: green;
  three: red;
};

.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}

/*
.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}
*/

自定义变量名

【首先】each 中不是必须非要使用 @value, @key, @index。

【核心原理】Less v3.7 中，each() 函数中，Less 引入了 匿名 mixins 的概念，以后可能会扩展到语法的其他部分。

【语法规则】
匿名的 mixins 使用 #() 或 .() 的形式，就像普通的 mixin 一样，以 . 或 # 开头。
（下面示例中 each 的第2参数 .(@v, @k, @i) {} 就是一个匿名 mixin。）
each () 函数将接受匿名 mixin 中定义的变量名，按顺序将它们绑定到 @value, @key, @index 值。
（下面示例中 匿名 mixin @v, @k, @i 绑定到上面 @value, @key, @index 变量。）
如果只写 each(@list, #(@value))，那么 @key 和 @index 都不会被定义。

【示例】示例源码

// 1、这是一个混合；
.set-2() {
  one: blue;
  two: green;
  three: red;
}

.set-2 {
// 2、set-2 规则集中，调用 each，第1参数传入 混合调用，第2参数是 匿名mixin，其中参数 @v, @k, @i （按这个顺序） 是each 一般使用的自定义名称。
  // Call mixin and iterate each rule
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}

// 3、输出
/*
.set-2 {
  one-1: blue;
  two-2: green;
  three-3: red;
}
*/

each, range 创建 for 循环！！

【版本】需要 Less v3.9.0

【语法规则】可通过 range 生成一个列表，并使用每个列表将其扩展为规则集来模拟 for 循环。

【示例】
range(), each() 模拟 for 循环

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()

/**
 * @brief: 向上取整。
 * @param {number} num一个浮点小数。
 * @return {*}
 */
ceil(2.4) // 3

floor()

/**
 * @brief: 向下取整。
 * @param {number} num一个浮点小数。
 * @return {*}
 */
floor(2.6) // 2

percentage()

/**
 * @brief: 将一个浮点小数转换为百分比字符串。
 * @param {number} num一个浮点小数。
 * @return {*}
 */
percentage(0.5) // 50%

round()

/**
 * @brief: 四舍五入。
 * @param {number} num一个浮点小数。
 * @param {number} decimalPlaces 可选，四舍五入的小数位数。默认为0。
 * @return {*}
 */
round(1.67) // 2
round(1.67, 1) // 1.7

pow()

/**
 * @brief: 幂等计算。
 * @param {number} n 底数。
 * @param {number} m 幂。
 * @return {*} m 个 n 相乘的结果
 */
pow(0cm, 0px) // 1cm
pow(25, -2) // 0.0016
pow(25, 0.5) // 5
pow(-25, 0.5) // NaN
pow(-25%, -0.5) // NaN%

min()

/**
 * @brief: 获取最大值。
 * @param {number} arguments 传入任意个参数。
 * @return {*}
 */
min(5, 10) // 5
min(3px, 42px, 1px, 16px) // 1px

max()

/**
 * @brief: 获取最大值。
 * @param {number} arguments 传入任意个参数。
 * @return {*}
 */
max(5, 10) // 10
max(3%, 42%, 1%, 16%) // 42%

不常用

详细见 文档。

sqrt() 计算一个数字的平方根（保持单位不变）。
abs() 计算一个数字的绝对值（保持单位不变）。
sin() 计算正弦值。
asin() 计算反正弦值。
cos() 计算余弦值。
acos() 计算反余弦值。
tan() 计算正切值。
atan() 计算反正切值。
pi() 返回 π值。
mod 未知；

类：类型函数

isnumber()

/**
 * @brief: 判断参数是否是数值。
 * @param {any} css 任意值。
 * @return {boolean}
 */
isnumber(#ff0);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false

isstring()

/**
 * @brief: 判断参数是否是 字符串。
 * @param {any} css 任意值。
 * @return {boolean}
 */
isstring(#ff0);     // false
isstring(blue);     // false
isstring("string"); // true
isstring(1234);     // false
isstring(56px);     // false
isstring(7.8%);     // false
isstring(keyword);  // false
isstring(url(...)); // false

iscolor()

/**
 * @brief: 判断参数是否是 颜色值。
 * @param {any} css 任意值。
 * @return {boolean}
 */
iscolor(#ff0);     // true
iscolor(blue);     // true
iscolor("string"); // false
iscolor(1234);     // false
iscolor(56px);     // false
iscolor(7.8%);     // false
iscolor(keyword);  // false
iscolor(url(...)); // false

iskeyword()

/**
 * @brief: 判断参数是否是 关键字。
 * @param {any} css 任意值。
 * @return {boolean}
 */
iskeyword(#ff0);     // false
iskeyword(blue);     // false
iskeyword("string"); // false
iskeyword(1234);     // false
iskeyword(56px);     // false
iskeyword(7.8%);     // false
iskeyword(keyword);  // true
iskeyword(url(...)); // false

isurl()

/**
 * @brief: 判断参数是否是 url。
 * @param {any} css 任意值。
 * @return {boolean}
 */
isurl(#ff0);     // false
isurl(blue);     // false
isurl("string"); // false
isurl(1234);     // false
isurl(56px);     // false
isurl(7.8%);     // false
isurl(keyword);  // false
isurl(url(...)); // true

ispixel()

/**
 * @brief: 判断参数是否是 像素值。
 * @param {any} css 任意值。
 * @return {boolean}
 */
ispixel(#ff0);     // false
ispixel(blue);     // false
ispixel("string"); // false
ispixel(1234);     // false
ispixel(56px);     // true
ispixel(7.8%);     // false
ispixel(keyword);  // false
ispixel(url(...)); // false

isem()

/**
 * @brief: 判断参数是否是 em单位值。
 * @param {any} css 任意值。
 * @return {boolean}
 */
isem(#ff0);     // false
isem(blue);     // false
isem("string"); // false
isem(1234);     // false
isem(56px);     // false
isem(7.8em);    // true
isem(keyword);  // false
isem(url(...)); // false

isem()

/**
 * @brief: 判断参数是否是 em单位值。
 * @param {any} css 任意值。
 * @return {boolean}
 */
isem(#ff0);     // false
isem(blue);     // false
isem("string"); // false
isem(1234);     // false
isem(56px);     // false
isem(7.8em);    // true
isem(keyword);  // false
isem(url(...)); // false

ispercentage()

/**
 * @brief: 判断参数是否是 百分比值。
 * @param {any} css 任意值。
 * @return {boolean}
 */
ispercentage(#ff0);     // false
ispercentage(blue);     // false
ispercentage("string"); // false
ispercentage(1234);     // false
ispercentage(56px);     // false
ispercentage(7.8%);     // true
ispercentage(keyword);  // false
ispercentage(url(...)); // false

isunit()

/**
 * @brief: 判断参数是否是 指定单位表示的数字。
 * @param {any} css 任意值。
 * @param {*} css 单位。（直接书写单位名称，百分号需要加字符串）
 * @return {boolean}
 */
isunit(11px, px);  // true
isunit(2.2%, px);  // false
isunit(33px, rem); // false
isunit(4rem, rem); // true
isunit(56px, "%"); // false
isunit(7.8%, '%'); // true
isunit(1234, em);  // false （只有数字没有单位也返回 false）
isunit(#ff0, pt);  // false
isunit("mm", mm);  // false （没有数字也返回 false）

isruleset()

/**
 * @brief: 判断参数是否是 规则集。
 * @param {any} css 任意值。
 * @return {boolean}
 */
@rules: {
    color: red;
}

isruleset(@rules);   // true
isruleset(#ff0);     // false
isruleset(blue);     // false
isruleset("string"); // false
isruleset(1234);     // false
isruleset(56px);     // false
isruleset(7.8%);     // false
isruleset(keyword);  // false
isruleset(url(...)); // false

isdefined()

/**
 * @brief: 判断参数是否是 一个less定义的变量。
 * @param {any} css 任意值。
 * @return {boolean}
 */
@foo: 1;
isdefined(@foo);     // true
isdefined(@bar);     // false

类：混合函数

color()

/**
 * @brief: 解析颜色。
 * @param {string} 标识颜色的字符串，变为颜色值。
 * @return {color}
 */
color("#aaa") // #aaa

image-size

/**
 * @brief: 从文件获取图像尺寸。
 * @version v2.2.0 新增
 * 【限制】此函数需要由每个环境实现。目前仅在节点环境中可用。
 * @param {string} 文件路径。
 * @return {dimension} 图像尺寸，宽高值
 */
image-size("file.png"); // 10px 10px

image-width

类似上面，获取宽度值。
v2.2.0 新增

image-height

类似上面，获取高度值。
v2.2.0 新增

convert()

/**
 * @brief: 把数字从一个单位转换成另一个单位。
 * @param {*} 包含一个带单位的数字。
 * @param {*} 一个单位。
 * @return {*}
 * 		如果单位兼容，则转换数字的单位。
 * 		如果单位不兼容，则第一个参数不加修改地返回。
 */
convert(9s, "ms") // 9000ms
convert(14cm, mm) // 140mm
convert(8, mm) // 8

data-uri

/**
 * @brief: 把 内联文件 url 转换成 base64 格式。
 * @param {string} mimetype 可选的，一个MIME 类型的字符串。
 * @param {string} url 内联文件的 url。
 * @return {*}
 * 		（2）处理为 base64/utf-8 格式；
 */
data-uri('../data/image.jpg');
// demo1 url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
// demo2 url('../data/image.jpg'); // 图片较大时输出

data-uri('image/jpeg;base64', '../data/image.jpg'); // demo3 url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

data-uri('image/svg+xml;charset=UTF-8', 'image.svg'); // demo4 url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");

【参数1】mimetype 一个MIME 类型的字符串。
（1）若没有 mime 类型；
data-uri 函数从文件后缀名中猜测，文本和 svg 文件被编码为 utf-8，其他任何文件都被编码为 base64。
（2）若提供了 mimetype；
若 mimetype 参数以 ;base64 结尾，则函数使用 base64。
例如： image/jpeg;base64 被编码为 base64，而 test/html 被编码为 utf-8。

【返回】
（1）资源文件太大时，回退到 url()。（上面 demo1）
（2）根据参数转换为 base64/utf-8 格式。（上面 demo2, demo3, demo4）

【示例】
data-uri() 转换内联文件 url

.container-big {
  width: 300px;
  height: 200px;
  background: data-uri('../assets/images/Snipaste_2025-04-17_09-11-48.png');
  // 2.97mb
}
.container-small {
  width: 300px;
  height: 200px;
  background: data-uri('image/png;base64', '../assets/images/logo_iptop.png');
  // 12.7kb
}

less 编译后结果
在这里插入图片描述

浏览器使用编译后样式

在这里插入图片描述

default()

todo

unit()

/**
 * @brief: 删除或更改一个维度的单位。
 * @param {*} dimension 一个数字（有单位/没有单位）。
 * @return {unit} unit 可选
 * 		有值，例如： em，就是要更改的单位；
 * 		无值，将删除该单位。
 */
unit(5, px) // 5px
unit(5em) // 5

get-unit()

/**
 * @brief: 返回一个数字的单位。
 * @param {*} dimension 一个数字（有单位/没有单位）。
 * @return {unit}
 * 		参数有单位，返回对应的单位。
 * 		参数无单位，无返回
 */
get-unit(5px) // px
get-unit(5) // （不返回任何东西）

get-unit 语法验证

svg-gradient()

语法

/**
 * @brief: 生成多层次 svg 渐变。
 * @param {*}
 * @return {unit}
 */
svg-gradient(to right, red, green 30%, blue)

参数

【限制】它最少有3个参数。

【参数1】指定渐变类型和方向。

【其它参数】列出颜色及其位置。
第一个和最后一个指定颜色的位置是可选的，其余颜色必须有指定的位置。
（可参考 线性渐变样式理解）

方向值

值必须是下面一个：

  • to bottom
  • to right
  • to bottom right
  • to top right
  • ellipse
  • ellipse at center

【语法规则】方向值可以指定为
（1）转义的字符串；例如：~“to bottom”
（2）以空格分隔的单词列表；例如 to bottom

示例

【方式1】颜色停止在 list 列表中。

.d1 {
  @list: red, green 30%, blue;
  background-image: svg-gradient(to right, @list);
}

【方式2】颜色停止在参数中。

.d2 {
  background-image: svg-gradient(to right, red, green 30%, blue);
}

svg-gradient() 语法验证
示例 less 编译输出内容是完全相同的：
在这里插入图片描述
使用 生成的样式
（实际应用意义不大，暂未使用到这种渐变）
在这里插入图片描述
（生成的背景图左边为红色，宽度为 30% 处为绿色，最后为蓝色。）

base 64 b编码，包含以下 svg线性渐变：

<?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>

兼容

tip: 在 v2.2.0 版本之前，上面的结果是 base64 编码的。

类：颜色定义函数

rgb()

/**
 * @brief: 从十进制红、绿、蓝中创建一个不透明颜色对象。
 * @param {numer|percentage} red 0 - 255 或 0 -100%
 * @param {numer|percentage} green 0 - 255 或 0 -100%
 * @param {numer|percentage} blue 0 - 255 或 0 -100%
 * @return {color} 十六进制色
 */
rgb(red, green, blue)

rgb(90, 129, 32) // #5a8120

rgba()

/**
 * @brief: 从十进制红、绿、蓝中创建一个带透明度的颜色对象。
 * @param red, green, blue 同上
 * @param {numer|percentage} alpha 0-100% 颜色透明度
 * @return {color} rgba() 格式
 */
rgba(red, green, blue, alpha)

rgba(90, 129, 32, 0.5) // rgba(90, 129, 32, 0.5)

argb()

/**
 * @brief: 创建颜色的十六进制表示。
 * 【注意】格式为 AARRGGBB，而不是 ##RRGGBBAA
 * @param {color} color 颜色对象
 * @return {color} 带 透明度的 十六进制表示
 */
argb(color)

argb(rgba(90, 23, 148, 0.5)); // #805a1794

使用 argb 生成的颜色值

在这里插入图片描述

hsl()

/**
 * @brief: 从色调、饱和度、亮度（HSL）创建一个不透明的颜色对象值。
 * @param {numer} hue 0 - 360 颜色值。
 * @param {numer|percentage} saturation 0 - 1 或 0 -100% 饱和度值。
 * @param {numer|percentage} lightness 0 - 1 或 0 -100% 亮度值。
 * @return {color} 带 透明度的 十六进制表示
 */
hsl(hue, saturation, lightness)

hsl(90, 100%, 50%); // #80ff00

【应用】创建一个基于其它颜色通道的新颜色，这是很有用的。
例如：

@new: hsl(hue(@old), 45%, 90%) // @new 会有 @old 的色调，以及它自己的饱和度和明度

hsla()

类似上面，带 alpha 透明度通道。

hsv()

/**
 * @brief: 从色调、饱和度、值（HSV）创建一个不透明的颜色对象值。
 * @param {numer} hue 0 - 360 色调。
 * @param {numer|percentage} saturation 0 - 1 或 0 -100% 饱和度值。
 * @param {numer|percentage} value 0 - 1 或 0 -100% 值。
 * @return {color} 带 透明度的 十六进制表示
 */
hsv(hue, saturation, value)

hsv(90, 100%, 50%); // #408000

hsva()

类似上面，多了 alpha 透明度通道参数。
hsva(90, 100%, 50%, 0.5) // rgba(64, 128, 0, 0.5)

类：色彩通道函数

.hue()

/**
 * @brief: 从一个 HSL 色彩空间中提取 色彩对象的色调通道。
 * @param {color} 一个颜色对象
 * @return {hue} 色调值
 */
hue(hsl(90, 100%, 50%)) // 90

saturation()

/**
 * @brief: 从一个 HSL 色彩空间中提取 饱和度通道。
 * @param {color} 一个颜色对象
 * @return {hue} 色调值
 */
saturation(hsl(90, 100%, 50%)) // 100%

lightness()

/**
 * @brief: 从一个 HSL 色彩空间中提取 亮度通道。
 * @param {color} 一个颜色对象
 * @return {hue} 色调值
 */
lightness(hsl(90, 100%, 50%)) // 50%

hsv 提取

类似上面；
hsvhue, hsvsaturation, hsvvalue 提取 HSV 颜色的 色调、饱和度、值。

hsvhue(hsv(90, 100%, 50%)) // 90
hsvsaturation(hsv(90, 100%, 50%)) // 100%
hsvvalue(hsv(90, 100%, 50%)) // 50%

red()

/**
 * @brief: 提取一个颜色对象的红色通道值。
 * @param {color} 一个颜色对象
 * @return {hue} 色调值
 */
red(rgb(10, 20, 30)) // 10

green(), blue(), alpha()

green(), blue() 类似上面，分别提取颜色对象的 绿色、蓝色通道值。

alpha() 提取透明度通道；
alpha(rgba(10, 20, 30, 0.5)) // 0.5

luma()

/**
 * @brief: 计算颜色对象的亮度（感知亮度）。
 * 【原理】使用 WCAG 2.0 推荐的 SMPTEC/Rec.709 系数。（对比函数中也会用到这种方法）
 * 【说明】在 v1.7.0 之前，亮度是在没有 伽马矫正 的情况下计算的，使用亮度函数来计算这些 “旧” 值。
 * @param {color} 一个颜色对象
 * @return {*} “感知亮度值” 0 - 100%
 */
luma(rgb(100, 200, 30)) // 44%

@c: luma(rgb(100, 200, 30));
.d1 {
  background: rgb(@c, @c, @c);
}

在这里插入图片描述

luminance()

// 计算没有伽马校正的亮度值
// 作用同上；参数同上；这个函数在 v1.7.0 之前被命名为 luma。

// demo
luminance(rgb(100, 200, 30) // 65%

@c: luminance(rgb(100, 200, 30));
.d1 {
  background: rgb(@c, @c, @c);
}
/*
.d1 {
  background: #a6a6a6;
}
*/

在这里插入图片描述

类：颜色操作函数

【模块说明】
“颜色操作” 通常采用与它们所改变的值相同的单位参数，并且百分比作为绝对值处理，因此将 10% 的值增加 10% 会导致 20% 的结果。
对于相对百分比，将 option 方法参数设置为 relative。
当使用相对百分比时，将 10% 的值增加 10% 会得到 11%。
值被限制在其允许的范围内，它们不绕行。
在显示返回值的地方，除了你通常会使用的十六进制版本之外，我们还使用了格式来清楚地说明每个函数所做的事情。

saturate()

/**
 * @brief: 将一种颜色在 HSL 色彩空间中的 饱和度 增加一个绝对值。
 * @param {color} color 一个hsl颜色对象
 * @param {percentage} amount 增加饱和度的值 0 - 100%
 * @param {boolean} method 可选的，使调整相对于当前值（默认是绝对）
 * @return {color} 调整后的颜色值
 */
saturate(hsl(90, 80%, 50%), 20%) // #80ff00 // hsl(90, 100%, 50%)

在这里插入图片描述

desaturate()

// 类似上面，这个 api 是 降低饱和度值
// 参数同 saturate
desaturate(hsl(90, 80%, 50%), 20%) //#80cc33 // hsl(90, 60%, 50%)

在这里插入图片描述

lighten()

/**
 * @brief: 将一种颜色在 HSL 色彩空间中的 明度/亮度 增加一个绝对值。
 * @param {color} 参数同 saturate
 * @return {color} 调整后的颜色值
 */
lighten(hsl(90, 80%, 50%), 20%) // #b3f075 // hsl(90, 80%, 70%)

在这里插入图片描述

darken()

// 类似上面，这个 api 是 降低 明度/亮度
// 参数同 saturate
darken(hsl(90, 80%, 50%), 20%) #4d8a0f // hsl(90, 80%, 30%)

在这里插入图片描述

fadein()

/**
 * @brief: 降低颜色的不透明度。
 * @param {color} 参数同 saturate （带 alpha 的颜色对象）
 * @return {color} （alpha 值增大）
 */
fadein(hsla(90, 90%, 50%, 0.5), 10%) // rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout()

// 类似上面，这个 api 是 增加 颜色的不透明度 （alpha 值减小）
// 参数同 saturate
fadeout(hsla(90, 90%, 50%, 0.5), 10%); // rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

fade()

/**
 * @brief: 设置颜色的绝对不透明度。
 * tip: 无论颜色是否已经有不透明度，都可以应用到颜色上。
 * @param {color} color 一个颜色值对象
 * @param {color} amount 颜色不透明度百分比值 0-1; 0-100%
 * @return {color} （alpha 值增大）
 */
fade(hsl(90, 90%, 50%), 10%) // rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

【场景】UI 设计稿中，例如 30% 不透明度的主色就可以用这个 api 实现。

spin()

【语法】

/**
 * @brief: 在任意方向上 旋转颜色的色相角。
 * @param {color} color 一个颜色值对象
 * @param {color} angle 一个颜色角旋转的度数
 * @return {color} 颜色色相改变
 */
spin(hsl(10, 90%, 50%), 30) // #f2a60d // hsl(40, 90%, 50%)
spin(hsl(10, 90%, 50%), -30) // #f20d59 // hsl(340, 90%, 50%)

在这里插入图片描述

【原因】请注意，颜色是通过 RBG 转换传递的，它不会保留灰色的色调值（因为当没有饱和度时色调没有意义）
【要求】你以保留色调的方式应用函数。

// 不能这样做（因为 #aaaaaa 颜色值没有色相值）
@c: saturate(spin(#aaaaaa, 10), 10%);

// 应该这样做
@c: spin(saturate(#aaaaaa, 10%), 10);

【说明】
虽然角度范围是 0-360，但它应用了一个 mod 360 操作，所以你可以传递更大（或负）的值，它们将围绕例如 360 和 720度的角度会产生相同的结果。
（个人理解：就是色相值增大/减小超过 360度时，色相值为 减 360 角度。）

mix()

/**
 * @brief: 以不同的比例混合两种颜色。不透明度包含在计算中。
 * @param {color} color1 颜色1
 * @param {color} color2 颜色2
 * @param {number} weight 可选，2种颜色的混合百分比，默认 50%
 * @return {color} 混合后的新颜色
 */
mix(#ff0000, #0000ff, 50%) // #800080
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%) // rgba(75, 25, 0, 0.75)

在这里插入图片描述

tint()

/**
 * @brief: 将颜色与白色按不同比例混合。
 * 【tip】和调用 mix(#ffffff, @color, @weight) 一样
 * @param {color} color 一个颜色值对象
 * @param {number} weight 可选，2种颜色的混合百分比，默认 50%
 * @return {color} 混合后的新颜色
 */
no-alpha: tint(#007fff, 50%);  // no-alpha: #80bfff;
with-alpha: tint(rgba(00,0,255,0.5), 50%); // with-alpha: rgba(191, 191, 255, 0.75);

在这里插入图片描述

shade()

// 类似上面，这里将颜色和黑色按不同比例混合，和调用 mix(#000000, @color, @weight) 一样
// 参数同 tint
no-alpha: shade(#007fff, 50%); // no-alpha: #004080;
with-alpha: shade(rgba(00,0,255,0.5), 50%); // with-alpha: rgba(0, 0, 64, 0.75);

在这里插入图片描述

greyscale()

/**
 * @brief: 移除 HSL 色彩空间中颜色的 所有饱和度。
 * 【tip】和调用 desaturate(@clolor, 100%)
 * @param {color} color 一个颜色值对象
 * @return {color} 移除饱和度后的灰度色
 */
greyscale(hsl(90, 90%, 50%)) // #808080 // hsl(90, 0%, 50%)

在这里插入图片描述
tip: 尽管它们的亮度值是相同的，单生成的灰度色看起来会比原先的绿色更暗。

【对比】与 luma() 获取 “感知亮度”相比。（用法不同，因为 luma 返回单个值，而不是颜色）

@c: luma(hsl(90, 90%, 50%));
color: rgb(@c, @c, @c);

// #cacaca

在这里插入图片描述
这一次，灰色的亮度看起来和绿色差不多，尽管它的值实际上更高。

contrast()

todo

类：颜色混合函数

【说明】这些 api 与 photoshop 等图像编辑器中的混合模式类似（但不完全相同）。

暂不使用，详细见文档。

Postman-SNIPPETS-内置函数使用
u013135630的博客
01-20 2185
//(1)方法1：获取token-设置为环境变量 varcounterLogin=pm.response.json(); pm.environment.set("token",counterLogin.result.token); //(2)方法2：获取token-设置为全局变量 varcounterLogin2=JSON.parse(responseBody); pm.globals.set("token",counterLogin2.result.token); //(3)获...
129_less-混合函数
述安的博客
08-28 338
less源码： //混合函数，在混合函数中可以直接设置变量，也可以给变量一个默认值 .test(@w:100px, @h:200px, @bg-color:red){ width: @w; height: @h; border: 1px solid @bg-color; } div{ //调用混合函数，按顺序传递参数 // .test(200px,300px,#bfa); //如果不给参数，则会使用test中的默认参数，但是这里给了一个参数，则默认给到@w .test(300px);
10.1 Less内置函数
Python老吕的博客
09-11 1080
CSS预处理器，如Less，正是在这样的背景下应运而生，它们为开发者提供了编写更高效、更可维护的CSS代码的能力。无论你是刚刚接触Less的新手，还是已经有一定经验想要进一步挖掘Less潜力的开发者，本专栏都将为你提供全面、系统的学习和实践指导。本专栏的每一章节都配有实际的代码示例和详细的解释，确保读者能够理解并掌握Less的每一个概念和技巧。本书由资深全栈工程师👨‍💻博主。精心撰写，通过丰富的实例和深入浅出的讲解，引导读者逐步深入Less的世界，探索其在现代Web开发中的应用和优势。
LESS CSS 函数手册
大爱无疆的博客
11-24 1976
索引 escape(@string); // 通过 URL-encoding 编码字符串e(@string); // 对字符串转义%(@string, values...); // 格式化字符串unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位color(@string); // 将字符串解析为颜色值data-uri([mimetype,] url);
CSS_LESS 语法/函数详解
weixin_34026484的博客
04-11 150
嵌套规则 01 #header { color: black; }#header .navigation {  font-size: 12px; 02 }#header .logo {  03   width: 300px;  04 }#header .logo:...
【前端知识】LESS一种CSS扩展语言
最新发布
wendao76的专栏
11-25 1606
Less是一门CSS的预处理语言，它在CSS的基础上添加了变量、嵌套、混合、函数等特性，使得CSS代码更加灵活、易于维护和复用。
5.10 Less函数调用运算符
Python老吕的博客
09-11 962
Less中的函数调用运算符是编写动态CSS的强大工具。通过内置的函数，你可以执行颜色混合、字符串处理、算术运算等操作。这些函数可以接收参数，并返回相应的值，使得样式表更加灵活和强大。基本语法： 示例： Less内置函数分类：颜色处理函数：用于生成和修改颜色值。字符串和格式化函数：用于处理字符串和生成格式化的字符串。算术函数：用于执行数学运算。类型检查函数：用于检查变量的类型。使用函数调用运算符的高级技巧：动态颜色生成： 响应式设计： 条件样式应用： 自定义混合与函数： 高级颜色操作： 通
Web-前端html+css从入门到精通 224. Sass与Less函数之内置自定义.zip
05-23
本课程聚焦于Sass和Less中的内置函数和自定义函数，旨在帮助初学者深入理解这两种预处理器的强大功能。 Sass和Less都是CSS的预处理器，它们允许开发者使用变量、嵌套规则、混合（mixins）、函数等特性，将CSS代码...
sqli-labs less-19 less-20 less-22
weixin_74182283的博客
04-02 1212
由于上述所说的cookie原理，一开始是不会有cookie信息的，但登录后，就会自动出现一则cookie信息。' and (updatexml(1,concat(0x7e,(select user()),0x7e),1)) or '1'='1 通过报错注入的函数，对其进行攻击，成功得到数据库信息。' and (updatexml(1,concat(0x7e,(select user()),0x7e),1)) or '1'='1 通过报错注入的函数，对其进行攻击，成功得到数据库信息。
【CSS】css的预编译语言less的基本使用指南-esay less插件使用-浏览器调试less-mixins混合函数
YK菌的博客
01-23 698
less的基本使用1. less是什么？1.1 CSS的一些问题1.2 less的作用1.3 vscode好用的less插件2. less 的(最)基本使用2.1 注释2.2 变量2.2.1 变量的语法2.2.2 几个注意点2.2.3 引用其他属性的值2.3 & 表示外层父元素2.4 extend 扩展2.5 mixin混合复制样式作为函数可以传参数内置的mixins函数2.6 可计算2.7 import2.8 调试 1. less是什么？ 官方中文网址 https://less.bootc
less里面的内置函数
赵佳敏的博客
01-25 3745
less里面的内置函数一、if()函数二、boolean()函数三、escape()函数四、length()五、extract()函数六、range()函数七、each()函数八、数学函数1. ceil---向上取整2. floor---向下取整3. percentage---取百分比的4. round---四舍五入5. sqrt---开平方6. abs---取绝对值7. min---取最小值8. max---取最大值的九、类型函数1. isnumber() 检测值是否是数字类型2. isstring(.
玩转CSS必不可少的Less
计算机小white博客
12-21 2285
通过Less让你书写CSS变得更加便捷吧！
less学习语法
a_xia_o的博客
08-14 2818
1.rgb/rgba/translate/rotate/scale2.非常好用的css函数： css中可以自定义属性：在一个大型的网页项目中，我们css使用到的某几种属性值往往是特定的 4.Less语法三：嵌套 选择器的嵌套： &：表示父级可以用于伪类、伪元素：在Less中，算术运算符+-*/可以对任何数字、颜色或变量进行运算。在原来的CSS编写过程中，多个选择器中可能有大量相同的代码 混合是一种将一组属性从一个规则集（或混入）到另一个规则集的方法。 注意：混入在没有参数的情况下，小括号可以省
学会如何使用LESS（四）----函数库
NINE-NINE的博客
06-09 1311
学会如何使用LESS（四）----函数库
less 函数_分享常用的CSS函数，助你写出更简洁的代码
weixin_39709178的博客
11-24 436
分享一些在项目中好用的一些CSS辅助函数，可以直接应用到你自己的样式代码中，传送门。这些函数当然不是CSS原生写法，有分为sass语法和less语法两套，大家可以自行选择复制或者下载。下面罗列的均是scss语法。less语法请查看传送门1、_clearfix%该函数可以直接用来清除浮动，比如（为了节省篇幅，后面的示例html代码就不罗列了，请参考源码）：<对应的scss：.clear-fix...
less中使用css内置函数
lfl976的博客
06-21 641
.select { width: min(430px, 100%); } css中这样使用，在less中，less认为min是自己定义的函数，没定义会报错。 可以使用less转义字符~，原样输出。 .select { width: ~"min(430px, 100%)"; }
CSS3中的calc()函数以及在less中的使用
码飞_CC的博客
08-07 4194
1. calc()函数 在css3中我们可以通过calc()函数来动态计算长度值，如： #div { width: calc(100% - 100px); } 它的语法是 calc(expression) expression参数是必须的，它是一个数学表达式，结果将采用运算后的返回值。 使用calc() 函数时需要注意的点： 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px); 任何长度值都可以使用calc()函数进行计算 calc()函数支持"+", "-"
css之less混合函数方法
前端工程师--则丸
10-29 1909
css之less混合函数方法  /* 参数 */ // 阴影色 @shadowColor: rgba(0,0,0,.20); // 文本框提示字颜色 @placeholderColor: #97a8be; /* 函数 */ //---垂直居中布局 .verticalLayout(@left: auto, @right: auto, @top: 0, @bottom: 0,...
用LESS函数写CSS样式简单上手教程
weixin_45674894的博客
10-18 5144
LESS 在写css的时候，可以直接写一个.css文件，但是实际开发中也会使用less的方法写css。 less的写法比css的写法功能更加强大。 Less简介 Less 是一门 CSS 预处理语言，它扩展了 CSS 的写法，增加了变量、函数等特性。 注意点： 在less中，完全兼容css的语法，所以可以直接在less文件中写css没问题 浏览器不认识less文件，需要需要使用less中的样式，...
Sass与Less内置自定义函数：Web前端精通指南
- **内置函数的自定义扩展**：开发者可以根据项目需要，对Sass或Less的内置函数进行扩展或修改，以适应特定的开发需求。 #### 从入门到精通 对于前端开发者而言，掌握Sass和Less不仅仅是使用内置功能那么简单，更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值