Less学习

What is Less

*动态的样式语言，扩充了css

Why use Less

*增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

How use Less

• http://lesscss.org/ 从这下载Less 然后
  
  

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;}