当前位置: 首页 > 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

相关文章:

Less常用内置函数

1,类型函数 isnumber(value) - 判断是否为数字isstring(value) - 判断是否为字符串isurl(value) - 判断是否为urliscolor(value) - 判断是否为颜色isunit(value, unit) - 判断value值是否为指定单位 示例: isnumber(12); // true isnumber(#333); // f…...

pdf转换成图片转换器在线怎么转?pdf转换成图片具体方法介绍

很多用户们都是比较喜欢使用pdf文档的,由于这种文件格式的便携性非常高,所以广泛的应用于工作和学习领域,再加上pdf文档可以随意转换成为其他的文件格式,更是让pdf文档受到了更多用户们的欢迎,那么pdf转换成图片转换器…...

JavaScript动态设置浏览器可视区域元素的文字颜色、监听滚动条、querySelectorAll、getBoundingClientRect

文章目录 前言htmlJavaScriptquerySelectorAllgetBoundingClientRect 前言 当元素出现在浏览器可视区域时给元素设置颜色等其他操作&#xff0c;比如当元素进入浏览器可视区域时&#xff0c;设置元素进入动画。 html <div id"idBox" class"box"><…...

意向客户的信息获取到底是怎样的,快来get一下

客户信息获取技术真的可以为企业提供精准客源吗&#xff1f;这个渠道到底安不安全&#xff0c;技术到底成不成熟&#xff1f;效果到底如何&#xff1f;下面简单的和大家分析一下。 客户信息获取技术是怎样的 手机采集引流方面&#xff0c;上量不精准&#xff0c;精准不上量的说…...

自动化测试常用脚本语言有哪些?

在自动化测试中&#xff0c;常用的脚本语言包括&#xff1a; 1. Python&#xff1a;Python是一个简洁、易读且功能强大的脚本语言&#xff0c;广泛应用于自动化测试领域。它具有丰富的测试框架和库&#xff0c;可以用于Web、移动应用和API等各种类型的测试。 2. Java&#xff1…...

mapreduce 的工作原理以及 hdfs 上传文件的流程

推荐两篇博文 mapreduce 的工作原理&#xff1a; 图文详解 MapReduce 工作流程_mapreduce工作流程_Shockang的博客-CSDN博客 hdfs 上传文件的流程 HDFS原理 - 知乎...

Ubuntu22.04安装ROS2

Ubuntu22.04安装ROS2 Excerpt ROS2官方文档 ROS2清华镜像站sudo apt update sudo apt upgrade locale # check for UTF-8 sudo apt update && sudo apt install locales sudo locale-gen en_US en_US.UTF-8 sudo update-locale LC_ALLe… ROS2官方文档 ROS2清华镜像站…...

uniapp - 倒计时组件-优化循环时间倒计时

使用定时器的规避方法 为了避免定时器误差导致倒计时计算错误&#xff0c;可以采用一些规避方法&#xff0c;比如将倒计时被中断时的剩余时间记录下来&#xff0c;重新开启定时器时再将这个剩余时间加到新的计算中。同时&#xff0c;为了避免定时器延迟&#xff0c;可以在每次执…...

java 实现访问者模式

访问者模式是一种行为设计模式&#xff0c;它允许您在不修改对象结构的情况下&#xff0c;向对象结构中的元素添加新的操作。这通常用于解决对象结构中元素类型多变&#xff0c;但操作类型相对稳定的问题。在访问者模式中&#xff0c;我们有一个访问者接口和多个具体的元素类&a…...

JDK源码剖析之PriorityQueue优先级队列

写在前面 版本信息&#xff1a; JDK1.8 PriorityQueue介绍 在数据结构中&#xff0c;队列分为FIFO、LIFO 两种模型&#xff0c;分别为先进先出&#xff0c;后进后出、先进后出&#xff0c;后进先出&#xff08;栈&#xff09; 而一切数据结构都是基于数组或者是链表实现。 在…...

TSINGSEE青犀AI视频分析/边缘计算/AI算法·人脸识别功能——多场景高效运用

旭帆科技AI智能分析网关可提供海量算法供应&#xff0c;涵盖目标监测、分析、抓拍、动作分析、AI识别等&#xff0c;可应用于各行各业的视觉场景中。同时针对小众化场景可快速定制AI算法&#xff0c;主动适配大厂近百款芯片&#xff0c;打通云/边/端灵活部署&#xff0c;算法一…...

力扣(LeetCode)算法_C++——最大连续 1 的个数 III

给定一个二进制数组 nums 和一个整数 k&#xff0c;如果可以翻转最多 k 个 0 &#xff0c;则返回 数组中连续 1 的最大个数 。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1,0,0,0,1,1,1,1,0], K 2 输出&#xff1a;6 解释&#xff1a;[1,1,1,0,0,1,1,1,1,1,1] 粗体数字…...

23062C++QT day2

封装一个结构体&#xff0c;结构体中包含一个私有数组&#xff0c;用来存放学生的成绩&#xff0c;包含一个私有变量&#xff0c;用来记录学生个数&#xff0c; 提供一个公有成员函数&#xff0c;void setNum(int num)用于设置学生个数 提供一个公有成员函数&#xff1a;void…...

React三属性之:props

作用 将父组件的参数传递给子组件 父组件 import ./App.css; import React from react; import PropsTest from ./pages/propsTest class App extends React.Component{render(){return(<div><h2>App组件</h2><PropsTest obj{{name:王惊涛,age:27}}>…...

大数据安全 | (一)介绍

目录 &#x1f4da;大数据安全 &#x1f407;大数据安全内涵 &#x1f407;大数据安全威胁 &#x1f407;保障大数据安全 ⭐️采集环节安全技术 ⭐️存储环节安全技术 ⭐️挖掘环节安全技术 ⭐️发布环节安全技术 &#x1f407;大数据用于安全 &#x1f4da;隐私及其…...

软件工程的概念及其重要性

软件工程是指将工程原理和方法应用于软件开发过程的学科&#xff0c;涉及软件的设计、开发、测试、维护和管理等各个阶段。它旨在提高软件开发的效率和质量&#xff0c;并确保软件满足用户的需求和预期。 软件工程的重要性体现在以下几个方面&#xff1a; 提高开发效率&#x…...

[足式机器人]Part3 变分法Ch01-2 数学预备知识——【读书笔记】

本文仅供学习使用 本文参考&#xff1a; 《变分法基础-第三版》老大中 《变分学讲义》张恭庆 《Calculus of Variations of Optimal Control Theory》-变分法和最优控制论-Daneil Liberzon Ch01-2 数学基础-预备知识1 1.3.2 向量场的通量和散度1.3.3 高斯定理与格林公式 1.3.2 …...

【嵌入式开发 Linux 常用命令系列 7.1 -- awk 过滤列中含有特定字符的行】

文章目录 awk 过滤列中字符串 上篇文章:嵌入式开发 Linux 常用命令系列 7 – awk 常用方法详细介绍 awk 过滤列中字符串 cat test.log | awk -F $31 {print $0}说明&#xff1a; -F 以什么分隔列&#xff0c;这里是以空格为分隔符&#xff1b;$3代表第3列&#xff1b;$3…...

前端(十六)——Web应用的安全性研究

&#x1f642;博主&#xff1a;小猫娃来啦 &#x1f642;文章核心&#xff1a;Web应用的安全性研究 文章目录 概述常见前端安全漏洞XSS&#xff08;跨站脚本攻击&#xff09;CSRF&#xff08;跨站请求伪造&#xff09; 点击劫持安全性验证与授权用户身份验证授权与权限管理 安全…...

无涯教程-JavaScript - BIN2HEX函数

描述 BIN2HEX函数将二进制数转换为十六进制。 语法 BIN2HEX (number, [places])争论 Argument描述Required/Optionalnumber 您要转换的二进制数。 数字不能超过10个字符(10位)。数字的最高有效位是符号位。其余的9位是幅度位。 负数使用二进制补码表示。 Requiredplaces 要…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…...

更新 Docker 容器中的某一个文件

&#x1f504; 如何更新 Docker 容器中的某一个文件 以下是几种在 Docker 中更新单个文件的常用方法&#xff0c;适用于不同场景。 ✅ 方法一&#xff1a;使用 docker cp 拷贝文件到容器中&#xff08;最简单&#xff09; &#x1f9f0; 命令格式&#xff1a; docker cp <…...

LINUX编译vlc

下载 VideoLAN / VLC GitLab 选择最新的发布版本 准备 sudo apt install -y xcb bison sudo apt install -y autopoint sudo apt install -y autoconf automake libtool编译ffmpeg LINUX FFMPEG编译汇总&#xff08;最简化&#xff09;_底部的附件列表中】: ffmpeg - lzip…...

可视化图解算法48:有效括号序列

牛客网 面试笔试 TOP101 | LeetCode 20. 有效的括号 1. 题目 描述 给出一个仅包含字符(,),{,},[和],的字符串&#xff0c;判断给出的字符串是否是合法的括号序列 括号必须以正确的顺序关闭&#xff0c;"()"和"()[]{}"都是合法的括号序列&…...