Less

变量

LESS支持自定义变量。在LESS中，变量以“@”开头，赋值时以“:”进行赋值。经过LESS的翻译，这些变量最终会转换为符合CSS标准的值。

@color:#4D926F;#header{color:@color;}h2{color:@color;}

上面的代码最终会转化为下面的代码：

#header{color:#4D926F;}h2{color:#4D926F;}

混合

混合允许开发者仅仅通过包含类名将一个类当中的所有属性全部应用于另一个类，同时也可以像函数一样提供参数使用。

CSS3并不支持混合，任何重复的代码必须在每个使用的地方重复编写，而通过LESS，你可以将代码进行复用。

.rounded-corners(@radius:5px){border-radius:@radius;-webkit-border-radius:@radius;-moz-border-radius:@radius;}#header{.rounded-corners;}#footer{.rounded-corners(10px);}

上面的代码将产生下面的代码：

#header{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}#footer{border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;}

嵌套

CSS支持逻辑上的嵌套，但在代码本身并不是嵌套的。LESS提供了代码的嵌套。

#header{h1{font-size:26px;font-weight:bold;}p{font-size:12px;a{text-decoration:none;&:hover{border-width:1px}}}}

将产生：

#headerh1{font-size:26px;font-weight:bold;}#headerp{font-size:12px;}#headerpa{text-decoration:none;}#headerpa:hover{border-width:1px;}

函数与操作符

LESS提供了函数用以支持复杂的属性间关系，其函数与JavaScript代码中的函数一一对应，允许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%);}

将产生：

#header{color:#333;border-left:1px;border-right:2px;}#footer{color:#114411;border-color:#7d2717;}

相较于Sass

Sass与LESS都属于CSS的预处理器，都允许通过一定的抽象手段将开发者的意图转化为CSS代码。

LESS受启发于Sass ，但Sass被设计为简化、扩展CSS，因此诸如大括号等语法都被移除，但流程控制、继承等概念被引入其中；相反，LESS被设计为更接近于CSS，其语法与CSS本身非常接近，因此一段合法的CSS代码也是一段合法的LESS代码。 不过新版本的Sass同样将CSS式语法引入了其中，命名为SCSS（Sassy CSS）。

相较于ZUSS

ZUSS受启发于LESS，但其目的是与Java进行结合，因此混合当中不允许使用JavaScript函数，取而代之的是Java函数。

应用于网站

LESS由于以JavaScript实现，因此既可以在浏览器上进行实时翻译，也可以首先在服务器上翻译为CSS之后再传送给浏览器。

免责声明：以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。