1. 程式人生 > >js學習總結----less常用的方法

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

width style min code blog com 亮度 cal back

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