Less (层叠样式表) - 维基百科，自由的百科全书

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

Less. LESS Logo.svg. 設計者, Alexis Sellier. Less(层叠样式表) 维基百科，自由的百科全书 跳到导航 跳到搜索 Less設計者AlexisSellier實作者AlexisSellier,DmitryFadeyev发行时间2009穩定版本3.13.0 （2020年9月29日，​20個月前​（2020-09-29） ） 型態系統动态类型作業系統跨平台許可證Apache许可证2文件扩展名.less網站lesscss.org啟發語言CSS,Sass影響語言Sass,LessFramework 层叠样式表 CSS動畫 IE盒模型缺陷 CSSfilter 无表格网页设计 响应式网页设计 维基教科书 本模板：查看讨论编辑 Less（或寫作LESS）是一种由AlexisSellier设计的动态层叠样式表语言，受Sass所影响，同时也影响了Sass的新语法：SCSS。

[1] LESS是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。

受益于JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。

[2] 在语法方面，LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。

LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。

[2] 目录 1变量 2混合 3嵌套 4函数与操作符 5相较于Sass 6相较于ZUSS 7应用于网站 8参考文献 9外部链接 变量[编辑] LESS支持自定义变量。

在LESS中，变量以“@”开头，赋值时以“:”进行赋值。

经过LESS的翻译，这些变量最终会转换为符合CSS标准的值。

[2] @color:#4D926F; #header{ color:@color; } h2{ color:@color; } 上面的代码最终会转化为下面的代码： #header{ color:#4D926F; } h2{ color:#4D926F; } 混合[编辑] 混合允许开发者仅仅通过包含类名将一个类当中的所有属性全部应用于另一个类，同时也可以像函数一样提供参数使用。

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

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

[2] #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[3]，但Sass被设计为简化、扩展CSS，因此诸如大括号等语法都被移除，但流程控制、继承等概念被引入其中；相反，LESS被设计为更接近于CSS，其语法与CSS本身非常接近，因此一段合法的CSS代码也是一段合法的LESS代码。

[4]不过新版本的Sass同样将CSS式语法引入了其中，命名为SCSS（SassyCSS）。

[1] 更多两者异同可见：https://gist.github.com/674726（英文）（页面存档备份，存于互联网档案馆） 相较于ZUSS[编辑] ZUSS受启发于LESS，但其目的是与Java进行结合，因此混合当中不允许使用JavaScript函数，取而代之的是Java函数。

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

参考文献[编辑] ^1.01.1SassandLess（页面存档备份，存于互联网档案馆）SassandLess ^2.02.12.22.32.4OfficialLESSwebsite（页面存档备份，存于互联网档案馆）OfficialLESSwebsite ^AboutLESS（页面存档备份，存于互联网档案馆）About ^What'sWrongWithCSS（页面存档备份，存于互联网档案馆）What'sWrongWithCSS 外部链接[编辑] 官方网站 LESS源码（GitHub）（页面存档备份，存于互联网档案馆） 查论编样式表语言（英语：Stylesheetlanguage）模型 桌面出版（英语：Stylesheet(desktoppublishing)） 网页开发 用户界面（英语：userinterfacestylesheetlanguage） 标准 CSS DSSSL（英语：DocumentStyleSemanticsandSpecificationLanguage） XSL 非标准 JavaScript(JSSS)（英语：JavaScriptStyleSheets） FOSI（英语：FormattingOutputSpecificationInstance） Qt Sass Less Stylus（英语：Stylus(stylesheetlanguage)） SMILTimesheets（英语：SMILTimesheets） PostCSS（英语：PostCSS） 列表 比较（英语：Comparisonofstylesheetlanguages） 取自“https://zh.wikipedia.org/w/index.php?title=Less_(层叠样式表)&oldid=64166540” 分类：​层叠样式表网页设计 导航菜单 个人工具 没有登录讨论贡献创建账号登录 命名空间 条目讨论 不转换 不转换简体繁體大陆简体香港繁體澳門繁體大马简体新加坡简体臺灣正體 查看 阅读编辑查看历史 更多 搜索 导航 首页分类索引特色内容新闻动态最近更改随机条目资助维基百科 帮助 帮助维基社群方针与指引互助客栈知识问答字词转换IRC即时聊天联络我们关于维基百科 工具 链入页面相关更改上传文件特殊页面固定链接页面信息引用本页维基数据项目 打印/导出 下载为PDF打印页面 其他语言 العربيةБългарскиDeutschΕλληνικάEnglishEspañolEestiفارسیFrançaisՀայերենItaliano日本語한국어മലയാളംPolskiPortuguêsРусскийСрпски/srpskiTürkçeУкраїнська 编辑链接