js中less常用的方法小结


Posted in Javascript onAugust 09, 2017

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常用的方法小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可输入的下拉框
Jun 19 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 #Javascript
基于Vue实例对象的数据选项
Aug 09 #Javascript
react-native之ART绘图方法详解
Aug 08 #Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 #Javascript
angular+ionic返回上一页并刷新页面
Aug 08 #Javascript
You might like
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP编程函数安全篇
2013/01/08 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
Python 正则表达式操作指南
2009/05/04 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
python几种常用功能实现代码实例
2019/12/25 Python
法学专业个人求职信
2013/09/26 职场文书
会计的岗位职责
2014/03/15 职场文书
付款委托书范本
2014/04/04 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
公司人事管理制度
2015/08/05 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书