码迷,mamicode.com
首页 > Web开发 > 详细

js学习总结----less常用的方法

时间:2017-08-08 19:59:46      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:总结   base   转换   去除   透明   工具   移动端   data   blog   

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常用的方法

标签:总结   base   转换   去除   透明   工具   移动端   data   blog   

原文地址:http://www.cnblogs.com/diasa-fly/p/7308126.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!