Less (层叠样式表) 技术专题简介

Less (层叠样式表) 技术专题简介-编程知识网

简介

Less设计者Alexis Sellier实现者Alexis Sellier, Dmitry Fadeyev发行时间2009当前版本4.1.3 (2022年6月9日；稳定版本) 类型系统动态类型操作系统跨平台许可证Apache许可证 2文件扩展名.less网站lesscss.org启发语言CSS, Sass影响语言Sass, Less Framework层叠样式表CSS动画IE盒模型缺陷CSS filter无表格网页设计响应式网页设计教科书本模板：查看讨论编辑Less（或写作LESS）是一种由Alexis Sellier设计的动态层叠样式表语言，受Sass所影响，同时也影响了Sass的新语法：SCSS。LESS是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。受益于JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。在语法方面，LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。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 }    }  }}

将产生：

#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代码中的函数一一对应，允许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）。

更多两者异同可见：https://gist.github.com/674726（英文）（页面存档备份，存于互联网档案馆）