less快速入门

Less CSS 是一个使用广泛的 CSS 预处理器，对 CSS 进行扩展，减少很多 CSS 的代码量。
less运用起来非常的简单方便，相信没学过的人阅读完后就懂了，主要是以下几点：

一、变量

style.less写法：

//定义变量：@
@nice-blue: #5B83AD;
#header {
    color: @nice-blue;//使用变量
}

编译后style.css：

#header {
    color: #5B83AD;
}

二、计算

style.less写法：

#jisuan{
    width:(100/24rem);
    height:(200/24rem);
}

编译后style.css：

#jisuan{
    width: 4.16666667rem;
    height: 4.16666667rem;
}

三、混合

style.less写法：

//类borderred中的样式设置放到另一个类中；
.bordered{
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
.post a{
    color: red;
    .bordered;
}

编译后style.css：

.post a{
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

四、嵌套

style.less写法：

#header {
  color: black;
  .navigation {font-size: 12px;}
  .logo {width: 300px;}
}

编译后style.css：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

五、转义

style.less写法：

//使用“～” 进行转义，转义可以把任意字符串转为属性或可变值
@min768: ~"(min-width: 768px)";
.element {
    @media @min768 {
        font-size: 1.2rem;
    }
}

编译后style.css：

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

六、资源分享

官网：lesscss.org

在线LESS编译：http://tool.oschina.net/less