8_less中的内置函数

最新推荐文章于 2023-09-05 10:49:41 发布
最新推荐文章于 2023-09-05 10:49:41 发布
阅读量315 收藏
点赞数
分类专栏： 前端 less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ice_stone_kai/article/details/110729257
版权
前端 同时被 2 个专栏收录
81 篇文章 1 订阅
订阅专栏
less
11 篇文章 0 订阅
订阅专栏

less中更支持一些js函数:
直接上html代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet/less" href="css/11.less">
    <script src="js/less.js"></script>
</head>
<body>
<div></div>
<script>
    /*
    由于less的底层就是用JavaScript实现的
    所以js中的一些常用函数在less中也支持
    但是有的方法只支持在node里面使用,不支持浏览器使用
    * */
    // 混杂方法
    /*image-size("file.jpg");*/ // =>100px 50px;

    // 数学

    /*
    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.1415926...才圆周率 π
    max(3px,42px,1px,16px);// =>42px
    * */

    // 字符串
    /*
    replace("Hi Tom?","Tom","Jack"); //=> "Hi Jack"
    * */

    // 判断类型
    /*
    isnumber(56px);//=>true 是否含数字
    * */

    //颜色操作
    /*
    增加饱和度
    saturate(color,20%);
    减少饱和度
    desaturate(color,20%);
    增加亮度
    lighten(color,20%);
    减少亮度
    darken(color,20%);
    减低透明度
    fadein(color,10%^);
    * */

    //颜色混合
    /*
    每个RGB通道相乘,然后除以255
    * */
</script>
</body>
</html>

less:

@str: "img/1.png";
// 字符串替换
@str2: replace(@str, "1", "2");

div {
  width: 200px;
  height: 200px;
  //background: url(@str2);
  // 降低颜色饱和度
  background: desaturate(yellow, 90%);
}

div:hover {
  // 增加颜色饱和度
  background: saturate(yellow, 90%);
}
无名之辈无名之辈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
LESS内置函数
Pulse的博客
12-29 1170
LESS 内置函数（字符串函数、列表函数、数学函数、逻辑函 数、类型函数、颜色操作函数）
python_less
02-08
在这个场景下，我们重点讨论Python语言中如何使用简洁的方式处理问题，这通常涉及函数、模块化、列表推导式、字典解析等高效编程技巧。 在Python编程中，"less"可能意味着更少的代码行数、更高的可读性和可维护性。...
Less的函数
03-23 626
escape(@string); // 通过 URL-encoding 编码字符串e(@string); // 对字符串转义%(@string, values...); // 格式化字符串unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位color(@string); // 将字符串解析为颜色值data-uri([mimetype,] url); // *
Less的内置函数
歪脖先生的博客
11-22 804
Less的内置函数 杂项函数 color 解析颜色，将代表颜色的字符串转换为颜色值. 参数： string: 代表颜色值的字符串。 返回值： color 案例： color("#aaa"); 输出： #aaa convert 将数字从一种单位转换到另一种单位。 第一个参数为带单位的数值，第二个参数为单位。如果两个参数的单位是兼容的，则数字的单位被转换。
LESS CSS 函数手册
大爱无疆的博客
11-24 1816
索引 escape(@string); // 通过 URL-encoding 编码字符串e(@string); // 对字符串转义%(@string, values...); // 格式化字符串unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位color(@string); // 将字符串解析为颜色值data-uri([mimetype,] url);
Less-内置函数
堇年
10-06 380
Less-内置函数混杂方法单位转换列表数学字符串判断类型颜色操作颜色混合 混杂方法 image-size("file.jpg"); // => 100px 50px image-width("file.jpg"); // => 100px image-height("file.jpg"); // => 50px 单位转换 convert(9s, "ms"); // =>...
less_scss_lesssass_
09-30
8. **函数**：SASS有一系列内置函数，如`lighten()`和`darken()`用于调整颜色的亮度。 压缩包中的"less_scss"文件可能包含关于这两个预处理器的示例代码和教程。学习并理解LESS和SASS的基础知识后，开发者可以编写...
Customizing Bootstrap 3 with LESS Ex_Files_Boot_Less
02-14
Bootstrap 3 中包含了许多内置的混合，如 `.make-grid-columns()` 用于生成网格系统，`.border-radius()` 用于设置圆角等。 在 "Ex_Files_Boot_Less" 的实例中，你可能遇到如何导入 Bootstrap 的 LESS 文件，如何...
Less.js 中文文档 word版
02-05
Less提供了一系列内置函数来处理各种操作，如颜色变换、字符串处理和数学运算。以下是一些示例： - **颜色处理**：使用 `saturate()` 来增加颜色的饱和度，使用 `lighten()` 来提高颜色的亮度。 - **数学运算**：...
lesscss中文文档_编译工具koala
03-12
5. **函数（Functions）**：内置函数如`lighten`、`darken`可以动态改变颜色的亮度或饱和度，增加代码的灵活性。 6. **导入（Import）**：使用`@import`规则，可以在一个Less文件中引入其他Less或CSS文件，方便组织...
less内置函数
qq_43155046的博客
07-02 100
escape(@string); // 通过 URL-encoding 编码字符串 e(@string); // 对字符串转义 %(@string, values...); // 格式化字符串 unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位 color(@string); // 将字符串解析为颜色值 data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url() ceil(@number); // 向上...
less里面的内置函数
赵佳敏的博客
01-25 2607
less里面的内置函数一、if()函数二、boolean()函数三、escape()函数四、length()五、extract()函数六、range()函数七、each()函数八、数学函数1. ceil---向上取整2. floor---向下取整3. percentage---取百分比的4. round---四舍五入5. sqrt---开平方6. abs---取绝对值7. min---取最小值8. max---取最大值的九、类型函数1. isnumber() 检测值是否是数字类型2. isstring(.
less中的内置函数
qq_45633169的博客
12-06 207
less中的内置函数 - BNTang - 博客园
less中使用css内置函数
lfl976的博客
06-21 490
.select { width: min(430px, 100%); } css中这样使用，在less中，less认为min是自己定义的函数，没定义会报错。 可以使用less转义字符~，原样输出。 .select { width: ~"min(430px, 100%)"; }
Less常用内置函数
最新发布
妍思码匠的博客
09-05 729
示例： 示例： 示例： 示例： 示例： 示例： 示例：
LESS详解之函数(七)
梦龙小站
11-26 3898
之前已经为大家介绍了6次关于LESS自带函数这块的小知识了，今天依然为大家介绍LESS自带函数的相关知识。主要介绍一些关于判断的函数，这期间还有些小例子以便大家更好的理解与运用。
在js中引入less的变量
cweeq的博客
03-17 3695
在js中引入less定义的变量
less/sass中变量通过js动态修改（基于css var变量方式）
qq_42152032的博客
06-22 3581
mounted(){ const bgImgUrl = this.APP && this.APP.options && this.APP.options.login && this.APP.options.login.bgImgUrl; bgImgUrl && document.querySelector(':root').style.setProperty('--bgImgUrl', `url(${bgImgUrl})`); //注意：此处必
less中使用js
热门推荐
Meditation_Crazy
09-12 2万+
本文内容 本文介绍在集成了less后，如何在css中使用js，以及一些比较偏僻，不好解决的问题 参考资料 less api：https://www.bootcss.com/p/lesscss/ ps:如果网站打开，页面样式比较乱，这时候看一下浏览器右上角，看看是不是被拦截了。api里面其实已经很详细的介绍了js的用法，可以用。 首先，常规的使用 比如，在css通过js获取高度。参数的...
编写函数，模拟python内置函数sorted()。
03-16
可以使用冒泡排序、选择排序、插入排序、快速排序等算法来实现模拟Python内置函数sorted()的功能。 以下是一个使用快速排序算法实现的示例代码： ```python def my_sorted(iterable, reverse=False): # 定义快速...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无名之辈无名之辈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值