Less常用内置函数

这篇具有很好参考价值的文章主要介绍了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) - 将数值从当前单位转换成另一个单位

示例:文章来源地址https://www.toymoban.com/news/detail-706623.html

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

到了这里,关于Less常用内置函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css ,less和sass的区别[简洁易懂

    CSS、Less和Sass都是用于样式表编写和管理的技术,它们之间有以下区别: CSS(层叠样式表)是一种标准的样式表语言,用于描述网页的外观和样式。它是前端开发中最基础和常用的技术,所有网页都需要使用CSS来定义样式。 Less是一种CSS预处理器,它在CSS的基础上提供了更多

    2024年02月11日
    浏览(45)
  • 探索CSS预处理器:Sass、Less与Stylus

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年03月11日
    浏览(43)
  • 2022 Stylelint 配置详细步骤(css、less、sass、vue适用)

    目录 插件安装 本地配置  忽略文件配置 依赖安装 配置项文件 Endings  Tips 插件安装 我用的软件是VScode,搜索插件: Stylelint   (  版本:v1.2.2 ) 本地配置 打开VScode的设置,打开 settings.json 或者直接在设置里点击这个图标可以自动跳转:  在里面配置一下代码,可根据自己的需

    2024年02月04日
    浏览(39)
  • 一文分清:Less、Sass、Scss、stylus,看看与css的对比

    CSS 预处理器是一种将预先定义的语法和功能添加到 CSS 中的工具。它们允许开发人员使用变量、嵌套规则、混合、继承等功能,以更高效和可维护的方式编写样式表。   CSS 预处理器的作用包括: 变量和计算 :预处理器允许开发人员使用变量来存储颜色、字体、尺寸等值,以

    2024年01月25日
    浏览(36)
  • post-css/less/sass样式嵌套与命令之"&"符号—BEM

    看了《 less 的 详解 https://www.jianshu.com/p/127b0974cfc3》,对于此文再做一别补充 直接嵌套写法 这一类是最常见的   这个一类是我们日常所常见的 父选择器运算符 的作用,就是让当前的选择器和父级选择器,按照特定的规则进行连接。它有多种用途,比如创建重复的类名: 输

    2023年04月09日
    浏览(34)
  • 在vite+vue3项目中配置使用css预处理器(less/sass)以及路径别名

    vite已经将这些预处理器的loader内置了,我们不用再像在webpack项目中那样,需要下载和配置一堆相关的loader,我们只需要下载less,sass依赖,就能直接在项目中使用啦 使用npm或者yarn来安装以下依赖: Less预处理器: npm install -D less Sass预处理器: npm install -D sass 如图,下载之后

    2024年02月11日
    浏览(81)
  • 前端三大Css处理器之Less

    Less是Css预处理器之一,分别有Sass、Less、Stylus这三个。         Less https://lesscss.org/         Less 是用JavaScript编写的,事实上,Less是一个JavaScript库,他通过混合、变量、嵌套和规则设置循环扩展了原生普通Css的功能。 Less的少数缺点之一是它 不支持函数 。 Less的语法与Scss十

    2024年02月10日
    浏览(36)
  • 前端:css less语法 /deep/ 深度影响的用法

    css中通常会在 style 标签内添加 scoped 来避免父组件对子组件的影响,添加了之后只能修改当前组件的样式。 这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值,从而避免父组件对子组件的样式的影响。 添加后控制台显示的样式就会像这样:     设置

    2024年02月12日
    浏览(32)
  • 前端css/less绕椭圆轨道旋转动画 带遮挡效果 3D

    效果如图,多个物体在轨道上绕中心物体旋转,当旋转到物体后面时将被遮挡。主要使用css实现,为了简化代码,引入less进行处理。 本质上是使用动画控制轨道带动内部的物体进行旋转,计算出每个物体在椭圆轨道上的位置,使用绝对定位放置物体。由于轨道上物体有多个

    2024年02月03日
    浏览(71)
  • less与sass

    1.变量: Less: 在这点上,Less和Sass的变量概念基本相同,都是以声明的方式存储值,然后在样式中引用。 2.混合(Mixins): Less: Sass: 在这点上,两者都支持定义可重用的样式块,这些块可以在样式表中重复使用,并且可以接受参数。 3.嵌套: Less: Sass: 在这个例子中,两者都支持选

    2024年02月07日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包