喝咖啡寫指令碼,順便再加一點點CSS文法糖 2.五分鐘學會Less

    CoffeeScript + Html5 + Less這個新組合,看上去Less更容易拿下,先嘗嘗糖吧.

    Less這麼小個東西,竟然要翻牆,真是沒有天理,簡直不可理喻,先不管那麼多了,那就看這個吧.http://www.lesscss.net/

    這個Less,比起CSS,就是要更少的代碼,更多的動態,更多的重用.提供了變數,繼承,運算,函數等,我們就來看看吧.

    首先是這玩意最後怎麼產生CSS, 兩種用法,我們先用一秒鐘選擇最容易的,就是網站提供的產生CSS功能.學了就可以使用了.然後當然也可以在RunJS裡直接寫.環境問題解決了,來看看文法吧.

    1.變數: 這功能好啊,為什麼CSS當年定標準的時候沒有想到呢?

其實就是定義一個常量  @car : 值;   使用的時候 @var  這個很象Sql的變數定義.

    2.混合: 這功能好啊,為什麼CSS當年定標準的時候沒有想到呢?

其實就是在CSS裡再引入另一CSS的名稱,如下:

@fontColor: red;.h2 {    font-size: 22px;}div {  color:@fontColor;    .h2}

真是簡單啊.任何 CSS class, id 或者 元素 屬性集都可以以同樣的方式引入。

    3.帶混合的參數: 就是混合的定義裡可以加參數 .h2(@變數名[: 預設值]),還可以用...表示多個參數.如下:

.h2(@size: 12px) {    font-size: @size;}div {  color:@fontColor;    .h2(22px)}

   

   Pattern-matching and Guard expressions 比較多,就是條件判斷後再混合.先略過

   4.嵌套: 這功能好啊,為什麼CSS當年定標準的時候沒有想到呢?

就是CSS裡再定義CSS,如下:

#header        { color: black;    .navigation  { font-size: 12px }    .logo        { width: 300px;    &:hover    { text-decoration: none }    }    }

&這個符號還有更多的用法,先略過.

   5.運算: 這功能好啊,為什麼CSS當年定標準的時候沒有想到呢?

任何數字、顏色或者變數都可以參與運算,如border: (@width * 2) solid black;

   6.函數: LESS 提供了多種函數用於控制顏色變化、處理字串、算術運算等等。

   7.名字空間: 為了更好的組織的封裝, 引入的時候用 > 號. 空間名稱 > 樣式名稱,如:

#header a {    color: orange;    #bundle > .button;    }

   8.範圍: 如變數定義等,類似JS

   9.注釋: 除了/**/注釋, 也可以用//注釋,但產生後自動過濾掉,很奇怪的是當初定義CSS時,為什麼不支援//這樣的注釋呢?

   10.匯入: Importing如:

@import "lib.less";    @import "lib";@import "lib.css";

   11.字串插值: 可以把變數插到字串裡.@{val},如:background-image: url("@{base-url}/images/bg.png");

   12.避免編譯: ~"XXX", 這樣XXX內容將原樣輸出成CSS

   13.選擇插值: @{val}這樣的變數還可以用地選取器名稱上,如: .@{name} {color:black;}

   14.JavaScript evaluation: 反向使用JS, 作者不建議使用.

然後呢?然後就沒有了.Less就是這麼少,除掉不建議使用的第14條,及略過的複雜部分,總共就十幾條規則,大約5分鐘就可以學完了,當然我邊學邊寫花的時間比5分鐘要多,還有更多的就是Less裡的函數了,不過以直覺來看,這些函數用不用都成,大多都是和顏色相關的.