开始使用less

　　完成了以上工作之后,我们终于开始要进入主题啦,下面能我就只是讲讲基本的使用,详细的使用大家还是去看官网的吧,毕竟写起来太长了,很耗费时间呢。

　　变量:less中定义变量是用@变量名:值;的方式的

@bgColor:#0094ff; @color:#fff;.demo{    background-color:@bgColor;    color:@color;}

生成的css代码:

.demo {  background-color: #0094ff;  color: #ffffff;}

混合式写法:

　　混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

/*less*/@bgColor:#0094ff; @color:#fff;.demo{    background-color:@bgColor;    color:@color;}.header{    border:1px solid #ededed;    .demo;}/*输出的css*/.demo {  background-color: #0094ff;  color: #ffffff;}.header {  border: 1px solid #ededed;  background-color: #0094ff;  color: #ffffff;}

嵌套式写法:

　　我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

/*less写法*/@bgColor:#0094ff; @color:#fff;.demo{    background-color:@bgColor;    color:@color;}header{    border:1px solid #ededed;    .demo;    h1 {    font-size: 26px;    font-weight: bold;  }  p { font-size: 12px;    a { text-decoration: none;      &:hover { border-width: 1px }    }  }}/*输出的css*/.demo {  background-color: #0094ff;  color: #ffffff;}header {  border: 1px solid #ededed;  background-color: #0094ff;  color: #ffffff;}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;}

函数 & 运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了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: #333333;  border-left: 1px;  border-right: 2px;}#footer {  color: #114411;  border-color: #7d2717;}