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

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...