Less編程化CSS學習

來源:互聯網
上載者:User

前段時間裡,抽空學習了Less,一種動態樣式語言,感覺真的很強大。

如何在用戶端使用:

1.引入你的樣式檔案,並把rel屬性設定為stylesheet/less 。

2.引入你下載的less.js檔案,在head中。

註:1.樣式檔案,一定要在less.js檔案之前。2.需要在伺服器環境下使用。

使用方式:

1.變數的使用方式。

  變數允許我們單獨定義一系列通用的樣式,然後再需要的時候調用。

@the-border:2px solid #ccc;.de{border: @the-border;}

2.函數的方式。

  我們可以像使用函數一樣的傳參數給它,並調用它。

.box-shadow(@shadow){    box-shadow: @shadow;}.de{width: 450px; height: 450px; .box-shadow(#936 0 0 10px);}

3.嵌套的方式。

  我們可以在一個選取器中,嵌套另一個選取器來實現繼承。

.de{        p{        color:#936;    }}

4.函數與運算的方式。

  程式設計中的加減乘除。

@the-border:1px;@the-color:#111;.de{color: @the-color * 3;}
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.