less中函数

less中函数:

1.杂项函数

1.color:解析颜色,将代表颜色的字符串转换为颜色值.

2.convert:将数字从一种单位转换到另一种单位。(两个参数)第一个参数为带单位的数值,第二个参数为单位。如果两个参数的单位是兼容的,则数字的单位被转换。如果两个参数的单位不兼容,则原样返回第一个参数。eg:convert(9s,"ms"); 输出:9000ms

3.data-uri:将资源内联进样式表,如果开启了 ieCompat 选项并且资源太大,或者此函数的运行环境为浏览器,则会回退到直接使用 url() 。如果没有指定 MIME,则 node 将使用 mime 包来决定正确的 mime 类型

4.unit:删除或更换单位。eg:unit(5em) 输出:5

2.字符串函数

1.escape:对字符串中的特殊字符做 URL-encoding 编码。eg:escape('a=1') 输出:a%3D1

  • 这些字符不会被编码:,/?@&+'~! and $
  • 被编码的字符是:\<space\>#^(){}|:><;][ and =
2. e:用于对 CSS 的转义,已经由 ~"value" 语法代替。

      它接受一个字符串作为参数,并原样返回内容,不含引号。它可用于输出一些不合法的 CSS 语法,或者是使用 LESS 不能识别的属性

3.% 格式化:此函数 %(string, arguments ...) 用于格式化字符串。

4.replace:用一个字符串替换一段文本。

   eg: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');

3.列表函数

1.length:返回列表中元素的个数

2.extract:返回列表中指定位置的元素

4.数学函数:

1.ceil:向上取整;

2.floor:向下取整;

3.percentage:将浮点数转化为百分比字符串

4.round:四舍五入取整

5.sqrt:计算一个数的平方,并原样保持单位

6.abs:计算数字的绝对值,并原样保持单位。

7.sin:正弦函数

8.asin:反正弦函数

9.cos:余弦函数

10.acos:反余弦函数

11.tan:正切函数

12.atan:反正切函数

13.pi:返回圆周率π

14.pow:设第一个参数为A,第二个参数为B,返回A的B次方。

15.mod:返回第一个参数对第二参数取余的结果

16.min:最小的一个

17.max:最大的一个

4.类型函数

1.isnumber:如果待验证的值为数字则返回 true ,否则返回 false 。

2.isstring:如果待验证的值是字符串则返回 true ,否则返回 false 。

3.iscolor:如果待验证的值为颜色则返回 true ,否则返回 false 。

4.iskeyword:如果待验证的值为关键字则返回 true ,否则返回 false 。

5.isurl:如果待验证的值为 url 则返回 true ,否则返回 false 。

6.ispixel:如果待验证的值为像素数则返回 true ,否则返回 false 。

7.isem:如果待验证的值的单位是 em 则返回 true ,否则返回 false 。

8.ispercentage:如果待验证的值为百分比则返回 true ,否则返回 false 。

9.isunit:如果待验证的值为指定单位的数字则返回 true ,否则返回 false 。



### Less 中的函数 #### 定义和调用自定义函数Less 中可以通过 `.` 或者 `()` 来创建简单的运算逻辑,不过对于更为复杂的操作,则可以利用 JavaScript 表达式来实现类似于函数的效果。然而,在官方文档里并没有直接提到像其他编程语言那样显式的`function`关键字用于定义函数[^2]。 为了达到类似函数的功能,通常会采用混合(Mixin)的方式配合参数传递完成特定的任务: ```less // 定义一个带参的 Mixin, 类似于定义了一个可重用的样式片段或者说是一个简易版的‘函数’ .myFunction(@color: red; @size: 10px){ color: @color; font-size: @size; } // 使用这个 ‘函数’, 并传入实际值覆盖默认参数 .callMyFunction { .myFunction(green, 20px); } ``` 这种做法虽然不是严格意义上的函数概念,但在日常开发中已经足够满足需求,并且保持了良好的语义化风格[^4]。 另外值得注意的是,Less 还内置了一些实用工具性质的方法,比如颜色处理、数学计算等,可以直接拿来即用而无需自己动手编写: ```less @base-color: #f06; div { background-color: lighten(@base-color, 10%); /* 调亮 */ border-color: darken(@base-color, 15%); /* 加深 */ } ``` 上述例子展示了如何运用内建的颜色调整方法来进行快速便捷的操作。 #### 总结 尽管 Less 不支持传统意义上通过 `function` 关键字声明函数语法结构,但是借助其强大的 Mixin 特性和丰富的内置辅助方法,完全可以构建出具有高度灵活性与复用性的代码模块。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值