当前位置: 首页 > news >正文

Less常用内置函数

1,类型函数

  • isnumber(value) - 判断是否为数字
  • isstring(value) - 判断是否为字符串
  • isurl(value) - 判断是否为url
  • iscolor(value) - 判断是否为颜色
  • isunit(value, unit) - 判断value值是否为指定单位

示例

isnumber(12); // true
isnumber(#333); // false
isunit(12px, px); // true
isurl(url(...)); // true

2,逻辑函数

  • if((condition), value1, value2) - 判断函数,condition表达式为true,返回value1,否则返回value2
  • boolean(condition) - 判断表达式condition的真假

示例

.main{width: if((2 > 1), 10px, 20px);
}@dark: boolean(2 > 1);span{color: if(@dark, #000, #fff);
}

3,数学函数

  • ceil(value) - 向上取整
  • floor(value) - 向下取整
  • round(value) - 四舍五入
  • percentage(value) - 将浮点数转换成百分比的字符串
  • abs(value) - 绝对值
  • sqrt(value) - 平凡根
  • pow(value) - 乘方
  • min(value1... valueN) - 取最小值
  • max(value1... valueN) - 取最大值

示例

ceil(2.1); // 3
percentage(0.5); // 50%
min(2px, 20px, 10px, 3px); // 2px

4,字符串函数

  • escape(str) - 不带引号返回转移后的字符串,类似于url-encoding
  • e(str) - 将字符串原样返回其内容,并不带引号
  • replace(str, pattern, replacement) - 替换字符串中的文本

示例:

escape("id=22"); // id%3D22@var: "hello";
.active:before{content: e(@var); // hello
}replace("hello, world", "world", "God"); // "hello, God"

5,列表函数

  • length(list) - 返回长度
  • extract(list, index) - 返回列表指定位置的值
  • each(list, rules) - 循环list列表,为每个成员设置rules规则@key和@index为索引,@value为每项的值

示例:

length(2px 3px 4px); // 3
extract(2% 3% 4%, 2); // 3%each(2px 3px 4px, {.item-{@index} {margin: @value;}
})
// 编译后
.item-1 {margin: 2px;
}
.item-2 {margin: 3px;
}
.item-3 {margin: 4px;
}

6,颜色函数

  • color(str) - 将表示颜色的字符串转换为颜色
  • lighten(colorObj, amount) - 增加颜色的亮度百分比
  • darken(colorObj, amount) - 降低颜色的亮度百分比
  • saturate(colorObj, amount) - 增加颜色的饱和度百分比
  • fade(colorObj, amount) - 设置颜色的透明度
  • mix(color1, color2, weight) - 按比例混合两种颜色

示例:

color("#333"); // #333
lighten(hsl(90, 80%, 50%), 20%); //  #b3f075
mix(#ff0000, #0000ff, 50%); // #800080

7,其他函数

  • image-size("file.png") - 返回文件的尺寸,例如10px 10px
  • image-width("file.png") - 返回文件的宽
  • image-size("file.png") - 返回文件的高
  • convert(value, unitName) - 将数值从当前单位转换成另一个单位

示例:

image-size("file.png"); // 20px 30px
image-width("file.png"); // 20px
convert(10cm, mm); // 100mm

http://www.lryc.cn/news/158023.html

相关文章:

  • pdf转换成图片转换器在线怎么转?pdf转换成图片具体方法介绍
  • JavaScript动态设置浏览器可视区域元素的文字颜色、监听滚动条、querySelectorAll、getBoundingClientRect
  • 意向客户的信息获取到底是怎样的,快来get一下
  • 自动化测试常用脚本语言有哪些?
  • mapreduce 的工作原理以及 hdfs 上传文件的流程
  • Ubuntu22.04安装ROS2
  • uniapp - 倒计时组件-优化循环时间倒计时
  • java 实现访问者模式
  • JDK源码剖析之PriorityQueue优先级队列
  • TSINGSEE青犀AI视频分析/边缘计算/AI算法·人脸识别功能——多场景高效运用
  • 力扣(LeetCode)算法_C++——最大连续 1 的个数 III
  • 23062C++QT day2
  • React三属性之:props
  • 大数据安全 | (一)介绍
  • 软件工程的概念及其重要性
  • [足式机器人]Part3 变分法Ch01-2 数学预备知识——【读书笔记】
  • 【嵌入式开发 Linux 常用命令系列 7.1 -- awk 过滤列中含有特定字符的行】
  • 前端(十六)——Web应用的安全性研究
  • 无涯教程-JavaScript - BIN2HEX函数
  • Kafka环境搭建与相关启动命令
  • 【C++】类的封装 ② ( 封装最基本的表层概念 | 类对象作为参数传递的几种情况 )
  • Linux上安装FTP
  • C/C++使用GDAL库编程窍门之——通用可移植性库(Common Portability Library, CPL)
  • Linux container_of() 宏定义
  • 详解python中的序列类型---列表list
  • Unity 引擎中国版 “团结引擎” 发布
  • MindsDB为许多不支持内置机器学习的数据库带来了机器学习功能
  • 世界级黑客丨电脑犯罪界的汉尼拔
  • 【Matlab】Matlab实现数据的动态显示方法
  • 【Android】SDK安装及配置