js中less常用的方法小结

 更新时间:2017年08月09日 08:16:56   投稿:jingxian  
下面小编就为大家带来一篇js中less常用的方法小结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1、color 解析颜色 把代表颜色的字符串转换为颜色值

@c:'#000'
.box{
  background:color(@c)
}

2、data-uri 把我们需要使用的素材图片转化成BASE64编码 ,项目中尤其是移动端的项目,节省了图片的加载时间,是图片优化的一个手段;LESS对于大图片是不能转码的,我们可以使用BASE64工具转码(tool.css-js.com)

项目中慎用,当你在移动端项目中有一些大图实在没有办法处理了的情况下在使用BASE64。

@c:'#000'
@url:'../img/banner';
.box{
  background:data-uri('@{url}/banner1.jpg');
}

3、unit(去除单位和添加单位)

@w100:100px
.box{
  width:unit(unit(@w100)-50,px)
}

4、length(长度) extract(提取)

@color:#000,#fff,#ccc,#eee;
.box{
  z-index:length(@color);
  background:extract(@color,length(@color));
}

5、ceil 、floor、percentage、round、sqrt...mod(取余数 (4,2))min max等数学方法

6、saturate(@value,20%)增加饱和度 desaturate(@value,20%)增加饱和度 lighten 增加亮度 darken降低亮度 fadein 增加透明度 fadeout 降低透明度 fade设置透明度 greyscale 完全移除饱和度变为灰度

以上这篇js中less常用的方法小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 使用JS取得焦点(focus)元素代码

    使用JS取得焦点(focus)元素代码

    这篇文章主要介绍了使用JS取得焦点(focus)元素的具体实现,需要的朋友可以参考下
    2014-03-03
  • javascript面向对象创建对象的方式小结

    javascript面向对象创建对象的方式小结

    这篇文章主要介绍了javascript面向对象创建对象的方式,结合实例形式总结分析了javascript常见的7种创建对象的方式,需要的朋友可以参考下
    2019-07-07
  • JavaScript闭包和作用域链的定义实现

    JavaScript闭包和作用域链的定义实现

    这篇文章主要为大家介绍了JavaScript闭包和作用域链的定义与实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • js动态调用css属性的小规律及实例说明

    js动态调用css属性的小规律及实例说明

    本篇文章主要介绍了js动态调用css属性的小规律及实例说明。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript命名空间模式实例详解

    JavaScript命名空间模式实例详解

    这篇文章主要介绍了JavaScript命名空间模式,结合实例形式分析了javascript命名空间模式的相关概念、原理、实现方法及操作注意事项,需要的朋友可以参考下
    2019-06-06
  • js构建二叉树进行数值数组的去重与优化详解

    js构建二叉树进行数值数组的去重与优化详解

    这篇文章主要给大家介绍了关于js构建二叉树进行数值数组的去重与优化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-03-03
  • TypeScript学习笔记之类型窄化篇

    TypeScript学习笔记之类型窄化篇

    目前用TypeScript的人越来越多,尤其是一些大厂,大的项目,github上面很多开源项目也都是ts语法编译的,这篇文章主要给大家介绍了关于TypeScript学习笔记之类型窄化的相关资料,需要的朋友可以参考下
    2021-09-09
  • 详解js获取video任意时间的画面截图

    详解js获取video任意时间的画面截图

    这篇文章主要介绍了js获取video任意时间的画面截图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 利用JS做网页特效_大图轮播(实例讲解)

    利用JS做网页特效_大图轮播(实例讲解)

    下面小编就为大家带来一篇利用JS做网页特效_大图轮播(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论