js學習總結----less常用的方法

標籤：總結   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常用的方法