喝咖啡寫腳本,順便再加一點點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里的函數了,不過以直覺來看,這些函數用不用都成,大多都是和顏色相關的.