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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
JSON辅助格式化处理方法
2013/03/26 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
babel基本使用详解
2017/02/17 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
详解jquery和vue对比
2019/04/16 jQuery
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
Python对象转JSON字符串的方法
2016/04/27 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
python分数表示方式和写法
2019/06/26 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python怎么对数字进行过滤
2020/07/05 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
商场广播稿范文
2015/08/19 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
Python jiaba库的使用详解
2021/11/23 Python
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js