less.js 使用

關於less.js 一直認為是個鑽了牛角尖的東西，被迫在項目利用了一段時間發現我錯了。所以總結下

less文件demon

#header {
    .red;
    .a_line;
    a{ color: #000000;}
    span {
        font-size: 14px;
        color: #0F0;
    }
    .logo {
        width: 300px;
        &:hover {
            text-decoration: none
        }
    }
}


.red (){
    color: red;
    .co{ border: 1px solid red;}
}

.a_line(){
a:focus { outline:0;}
a{blr:~"expression(this.onFocus=this.close())";} // 只支持IE，過多使用效率低 
 a{blr:~"expression(this.onFocus=this.blur())";} // 只支持IE，過多使用效率低 
 a:focus { -moz-outline-style: none; } // IE不支持 
 a{ text-decoration: none}
}

 less的優點

1.清晰的css邏輯結構，使處於#header選擇器的css樣式全部寫在#header樣式塊中。

2.樣式變量，less官網稱為混合模式

其中.red (){ color: red; .co{ border: 1px solid red;} }與.red { color: red; .co{ border: 1px solid red;} }的寫法，與效果是有本質區別的。

.red (){ color: red; .co{ border: 1px solid red;} } 相當建立了個樣式變量，不會再css中顯示，不會直接起作用，類似於未實例化。 只有在.class{}中調用才會起作用。調用的效果為.class{color: red; .co{ border: 1px solid red;}}這就防止了廢棄不被使用css樣式

.red {color: red; .co{ border: 1px solid red;}}是一個已經起作用的類，在.class{}中調用效果為 .class{color: red; .red{.co{ border: 1px solid red;}}}。

 

less官網自帶winless一個將less自動生成css的工具，會自動監控指定的less文件，只要文件被更改就會自動更新生成新的被壓縮的css文件。