less的簡單實用介紹

 

less是css的預處理語言，做爲 CSS 的一種擴展，不只徹底兼容 CSS 語法，並且連新增的特性也是使用 CSS 語法。

編譯方式

1.使用koala編譯

Koala 是一款由國人開發的開源預處理語言圖形編譯工具，目前已經支持less，sass，compass，coffeescript，很好用。下載地址 http://koala-app.com/index-zh.html

2.使用nodejs

在Node.js中安裝LESS最簡單的方式就是使用Node包管理工具npm來安裝：

npm install -g less

若是你使用Mac或者Linux，可能須要使用管理員身份安裝：

sudo npm install -g less

編譯

lessc styles.less

 經常使用方式介紹

1.變量

變量命名以@開頭，例如

@myColor: #5B83AD;

 #header { color: @myColor; }

編譯爲：

#header { color: #5B83AD; }

2.混合（mixin）

不帶參數的方式，例如

.myColor{color: #666}

#header｛

    width:100px;

    height：100px;

    .myColor

｝

混合也能夠帶參數，例如

.myColor(@color){color: @color}

#header｛

    width:100px;

    height：100px;

    .myColor(#346)

｝

混合也能夠定義默認參數值，例如

若是調用不傳參數的話，#666爲默認值

.myColor(@color: #666){color: @color}

#header｛

    width:100px;

    height：100px;

    .myColor()

｝

 

3.嵌套規則

咱們以前常常見到ul li的css樣式

ul{list-style:none}

ul li{    

    height:30px;

}

ul a｛

    color：#222；

｝

ul a:hover{

    color:#777;

}

用less嵌套的話這樣寫，很好理解，其中&表示上一層元素，就是a

ul{

    list-style:none;

    li{        

        color：#222；

        height:30px;

    }

    a{

         color:#222;

        &：hover{

            color:#777;

        }

    }

}

 

4.運算

數字能夠加減乘除，例如

@myFont:14px；

#d1{

    font-size：8px+@myFont

}

結果爲

#d1{

    font-size：22px

}

顏色也能夠運算，要先轉化爲10進制。

 

5.匹配模式

相似於js的條件運算

.test（top，@w:100px）｛   

   height：@w;

｝

.test（bottom，@w:200px）｛   

    height：@w;

｝

#header｛

    .test(top,120px); //匹配第一個.test

｝

 

6.@arguments

全部的參數

.my(@w:100px，@s：#222，@xx：solid){

    border：@arguments；

}

#header｛.my();｝

7.避免編譯

使用 ~'............'