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 相关文章推荐
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
浅谈React之状态(State)
Sep 19 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
vue实现井字棋游戏
Sep 29 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
php 输出双引号"与单引号'的方法
2010/05/09 PHP
初品cakephp 入门基础
2012/02/16 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
js性能优化技巧
2015/11/29 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
jquery添加div实现消息聊天框
2020/02/08 jQuery
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
详解Python中的文件操作
2021/01/14 Python
init进程的作用
2015/08/20 面试题
手机业务员岗位职责
2013/12/13 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
五四演讲稿范文
2014/09/03 职场文书
水电维修专业推荐信
2014/09/06 职场文书
事业单位聘任报告
2015/03/02 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
电影雷锋观后感
2015/06/10 职场文书
Go timer如何调度
2021/06/09 Golang
element tree树形组件回显数据问题解决
2022/08/14 Javascript