What is Less
*动态的样式语言,扩充了css
Why use Less
*增加了诸如变量、混合(mixin)、函数等功能,让 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;}