less中的内置函数

  • 由于 less 的底层就是用 JavaScript 实现的
  • 所以 JavaScript 中常用的一些函数在 less 中都支持
@str: "./../images/1.jpg";
@strTwo: replace(@str, "1", "2");

div {
  width: 200px;
  height: 200px;
  background: url(@strTwo);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BNTang</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div></div>
</body>
</html>

image-20210808195404871

@str: "./../images/1.jpg";
@strTwo: replace(@str, "1", "2");

div {
  width: 200px;
  height: 200px;
  background: url(@strTwo);
  background: desaturate(yellow, 50%);
}

div:hover {
  background: saturate(yellow, 50%);
}

image-20210808195503541

如上是一个小示例，其它的用法都是差不多的就不在一样的演示了

混杂方法

image-size("file.jpg");// => 100px 50px
image-width("file.jpg");// => 100px
image-height("file.jpg");// => 50px

单位转换

convert(9s, "ms");// => 9000ms
convert(14cm, mm);// => 140mm
convert(8, mm);// => 8

列表

@list: "A", "B", C, "D";

length(@list);// => 4
extract(@list, 3);// => C

数学

ceil(2.1);// => 3 向上取整
floor(2.1);// => 2 向下取整
percentage(.3);// => 30% 转百分比
round(1.67, 1);// => 1.7 四舍五入，保留一位小数点
sqrt(25cm);// => 5cm 取平方根
abs(-5cm);// => 5cm 取绝对值
pi();// => 3.141592653589793 圆周率π
max(3px, 42px, 1px, 16px);// => 42px
min(3px, 42px, 1px, 16px);// => 1px

字符串

replace("Hi Tom?", "Tom", "Jack");// => "Hi Jack"

判断类型

isnumber(56px);// => true 是否含数字
isstring("string");// => true
iscolor(#ff0);// => true
iscolor(blue);// => true
iskeyword(keyword);// => true
isurl(url(...));// => true
ispixel(56px);// => true
isem(7.8em);// => true
ispercentage(7.8%);// => true
isunit(4rem, rem);// => true 是否为指定单位
isruleset(@rules);// => true 是否为变量

颜色操作

// 增加饱和度
saturate(color, 20%)

// 减少饱和度
desaturate(color, 20%)

// 增加亮度
lighten(color, 20%)

// 减少亮度
darken(color, 20%)

// 降低透明度
fadein(color, 10%)

// 增加透明度
fadeout(color, 10%)

// 设置绝对不透明度(覆盖原透明度)
fade(color, 20%)

// 旋转色调角度
spin(color, 10)

// 将两种颜色混合，不透明度包括在计算中。
mix(#f00, #00f, 50%)

// 与白色混合
tint(#007fff, 50%)

// 与黑色混合
shade(#007fff, 50%)

// 灰度，移除饱和度
greyscale(color)

// 返回对比度最大的颜色
contrast(color1, color2)

颜色混合

// 每个RGB 通道相乘，然后除以255
multiply(color1, color2);

// 与 multiply 相反
screen(color1, color2);

// 使之更浅或更暗
overlay(color1, color2)

// 避免太亮或太暗
softlight(color1, color2)

// 与 overlay 相同，但颜色互换
hardlight(color1, color2)

// 计算每个通道(RGB)基础上的两种颜色的平均值
average(color1, color2)

其它函数可参考如下提供的链接：

posted @   BNTang  阅读(349)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示