What is Less
*動態(tài)的樣式語言稠歉,擴充了css
Why use Less
*增加了諸如變量附较、混合(mixin)钞馁、函數(shù)等功能坪稽,讓 CSS 更易維護、方便制作主題扛伍、擴充筷畦。
How use Less
-
http://lesscss.org/ 從這下載Less 然后
<link rel="stylesheet/less" type="text/css" href="less/styles.less">
<script src="js/less.js" type="text/javascript"></script>
demo
*變量
Less Code
/*======== 定義變量===========*/
@color: #4d926f;
/*======== 應用到元素中 ========*/
#header {
color: @color;
}
h2 {
color: @color;
}
Compiled Css code:
/*======= Less 編譯成 css ======*/
#header {
color: #4d926f;
}
h2 {
color: #4d926f;
}
Less中的變量還具有計算功能,如
Less Code
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
Compiled Css code:
#header {color: #6c94be;}