Less (层叠样式表)

Less（或写作LESS）是一种由Alexis Sellier设计的动态层叠样式表语言，受Sass所影响，同时也影响了Sass的新语法：SCSS。^[2]

Less

设计者	Alexis Sellier
实现者	Alexis Sellier, Dmitry Fadeyev
发行时间	2009
当前版本	4.2.0（2023年9月7日；稳定版本）[1]
类型系统	动态类型
操作系统	跨平台
许可证	Apache许可证 2
文件扩展名	.less
网站	lesscss.org
启发语言
CSS, Sass
影响语言
Sass, Less Framework

层叠样式表

• CSS动画
• IE盒模型缺陷
• CSS filter
• 无表格网页设计
• 响应式网页设计
• 维基教科书

本模板：

• 查看
• 讨论
• 编辑

LESS是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。受益于JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。^[3]

在语法方面，LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。^[3]

变量

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

@color: #4D926F;

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

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

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

混合

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

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

.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提供了代码的嵌套。^[3]

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

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

相较于ZUSS

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

应用于网站

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

参考文献

1. Release 4.2.0. 2023年9月7日 [2023年9月18日].
2. Sass and Less （页面存档备份，存于互联网档案馆） Sass and Less
3. Official LESS website （页面存档备份，存于互联网档案馆） Official LESS website
4. About LESS （页面存档备份，存于互联网档案馆） About
5. What's Wrong With CSS （页面存档备份，存于互联网档案馆） What's Wrong With CSS

外部链接

• 官方网站
• LESS原始码（GitHub） （页面存档备份，存于互联网档案馆）