LESS 与 SASS

作为 CSS 的一种扩展，Less 不仅完全兼容 CSS 语法，而且连新增的特性也是使用 CSS 语法。这样的设计使得学习 Less 很轻松，而且你可以在任何时候回退到 CSS。

用less来控制样式，更加的方便，写好的less代码，可以通过编译生成css,这是对css非常强大的扩展，让我们写起代码时，更加的顺畅。

变量，在less中声明变量用@，例如：

@test: red;

.test{

color: @test;

}

编译后：

.test{

color: red;

}

注:变量只能定义一次，本质就是常量

混合（Mixin），在两块样式中，可以引用另一个块的样式，例如：

.cls{

width: 100px;

height: 100px;

}

.cls1{

background: green;

.cls;

}

.cls2{

background: #ccc;

.cls;

}

编译后：

.cls1{

background: green;

width: 100px;

height: 100px;

}

.cls2{

background: #ccc;

width: 100px;

height: 100px;

}

嵌套规则，选择器可以嵌套写，一层一层的，模仿html的DOM结构写，例如：

.parent{

width: 100px; height: 100px;

background: #000DFF;

.first{

color: #00FF20;

}

.second{

color: red;

}

}

编译后：

.parent{

width: 100px; height: 100px;

background: #000DFF;

}

.first{

color: #00FF20;

}

.second{

color: red;

}

运算，任何数字、颜色或者变量都可以参与运算，（+-*/）例如：

@border: 1px;

border: @border * 5 solid #000;

函数，Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。可参考函数手册。

注释，块注释和行注释都可以使用：

/* */     //

导入，以导入一个.less文件。

@import "library"; // library.less @import "typo.css"; 

这只是less一些简单的使用方法，还有很多高级的东西，慢慢看吧，很值得学习，会继续关注less，并在项目中使用。

学习链接：http://less.bootcss.com/

LESS和Sass在语法上有些共性，比如下面这些：

混入(Mixins)——class中的class；

参数混入——可以传递参数的class，就像函数一样；

嵌套规则——Class中嵌套class，从而减少重复的代码；

运算——CSS中用上数学；

颜色功能——可以编辑颜色；

名字空间(namespace)——分组样式，从而可以被调用；

作用域——局部修改样式；

JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，所以，是在客户端处理的。

另一方面，Sass是基于Ruby的，然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦我完成了开发，我就复制然后粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出，从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。