一翘瓮、開發(fā)中可通過less.js動態(tài)生成css
1贮折、簡介
less是css的一種預(yù)處理語言，在less里可以定義變量资盅，簡單的+-*/運(yùn)算调榄，代碼混合等等踊赠，可以提高我們的開發(fā)效率。
可參考
http://www.bootcss.com/p/lesscss/
2每庆、使用
下載less.js
http://lesscss.cn/#download-options
頁面引入less和less.js
<link rel="stylesheet/less" href="syle.less">
<script src=jquery.min.js"></script>
<script src="less.min.js"></script>
這樣會在頁面加載后動態(tài)生產(chǎn)css筐带，正式環(huán)境中建議引入生成好的css文件。
3缤灵、語法完全支持css語法
通過@定義變量伦籍，依然采用就近原則，局部變量有使用局部變量腮出。
變量允許我們單獨(dú)定義一系列通用的樣式帖鸦，然后在需要的時候去調(diào)用。所以在做全局樣式調(diào)整的時候我們可能只需要修改幾行代碼就可以了胚嘲。
混合可以將一個定義好的class A輕松的引入到另一個class B中作儿，從而簡單實(shí)現(xiàn)class B繼承class A中的所有屬性。我們還可以帶參數(shù)地調(diào)用慢逾，就像使用函數(shù)一樣立倍。
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
/* 生成的 CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
// LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/* 生成的 CSS */
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
我們可以在一個選擇器中嵌套另一個選擇器來實(shí)現(xiàn)繼承，這樣很大程度減少了代碼量侣滩，并且代碼看起來更加的清晰口注。
// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/* 生成的 CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
運(yùn)算提供了加，減君珠，乘寝志，除操作；我們可以做屬性值和顏色的運(yùn)算策添，這樣就可以實(shí)現(xiàn)屬性值之間的復(fù)雜關(guān)系材部。LESS中的函數(shù)一一映射了JavaScript代碼，如果你愿意的話可以操作屬性值唯竹。
// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
/* 生成的 CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
3乐导、less的監(jiān)視模式
監(jiān)視模式是客戶端的一個功能，這個功能允許你當(dāng)你改變樣式的時候浸颓，客戶端將自動刷新物臂。
要使用它，只要在URL后面加上'#!watch'产上，然后刷新頁面就可以了棵磷。另外，你也可以通過在終端運(yùn)行l(wèi)ess.watch()來啟動監(jiān)視模式晋涣。
這些是less的基本使用方法仪媒，更多功能和高級用法，可以查看api文檔谢鹊。
