fbpx
维基百科

Less (层叠样式表)

Less(或寫作LESS)是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了Sass的新语法:SCSS。[2]

Less
設計者Alexis Sellier
實作者Alexis Sellier, Dmitry Fadeyev
发行时间2009
目前版本
  • 4.1.3 (2022年6月9日;穩定版本)[1]
型態系統动态类型
操作系统跨平台
許可證Apache许可证 2
文件扩展名.less
網站lesscss.org
啟發語言
CSS, Sass
影響語言
Sass, Less Framework

LESS是开源的,其第一个版本由Ruby写成,但在后续的版本当中,Ruby逐渐被替换为JavaScript。受益于JavaScript,LESS可以在客户端上运行(IE6+、WebkitFirefox),也可以在服务端运行(Node.jsRhino)。[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. ^ https://github.com/less/less.js/releases/tag/v4.1.3.
  2. ^ 2.0 2.1 Sass and Less (页面存档备份,存于互联网档案馆) Sass and Less
  3. ^ 3.0 3.1 3.2 3.3 3.4 Official LESS website (页面存档备份,存于互联网档案馆) Official LESS website
  4. ^ About LESS (页面存档备份,存于互联网档案馆) About
  5. ^ What's Wrong With CSS (页面存档备份,存于互联网档案馆) What's Wrong With CSS

外部链接

less, 层叠样式表, less, 或寫作less, 是一种由alexis, sellier设计的动态层叠样式表语言, 受sass所影响, 同时也影响了sass的新语法, scss, less設計者alexis, sellier實作者alexis, sellier, dmitry, fadeyev发行时间2009目前版本4, 2022年6月9日, 穩定版本, 型態系統动态类型操作系统跨平台許可證apache许可证, 2文件扩展名, less網站lesscss, org啟發語言css, sass影響語言sass, . Less 或寫作LESS 是一种由Alexis Sellier设计的动态层叠样式表语言 受Sass所影响 同时也影响了Sass的新语法 SCSS 2 Less設計者Alexis Sellier實作者Alexis Sellier Dmitry Fadeyev发行时间2009目前版本4 1 3 2022年6月9日 穩定版本 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 目录 1 变量 2 混合 3 嵌套 4 函数与操作符 5 相较于Sass 6 相较于ZUSS 7 应用于网站 8 参考文献 9 外部链接变量 编辑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 5 px webkit border radius 5 px moz border radius 5 px footer border radius 10 px webkit border radius 10 px moz border radius 10 px 嵌套 编辑CSS支持逻辑上的嵌套 但在代码本身并不是嵌套的 LESS提供了代码的嵌套 3 header h1 font size 26 px font weight bold p font size 12 px a text decoration none amp hover border width 1 px 将产生 header h1 font size 26 px font weight bold header p font size 12 px header p a text decoration none header p a hover border width 1 px 函数与操作符 编辑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 1 px border right 2 px 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之后再传送给浏览器 参考文献 编辑 https github com less less js releases tag v4 1 3 2 0 2 1 Sass and Less 页面存档备份 存于互联网档案馆 Sass and Less 3 0 3 1 3 2 3 3 3 4 Official LESS website 页面存档备份 存于互联网档案馆 Official LESS website About LESS 页面存档备份 存于互联网档案馆 About What s Wrong With CSS 页面存档备份 存于互联网档案馆 What s Wrong With CSS外部链接 编辑官方网站 LESS源码 GitHub 页面存档备份 存于互联网档案馆 取自 https zh wikipedia org w index php title Less 层叠样式表 amp oldid 64166540, 维基百科,wiki,书籍,书籍,图书馆,

文章

,阅读,下载,免费,免费下载,mp3,视频,mp4,3gp, jpg,jpeg,gif,png,图片,音乐,歌曲,电影,书籍,游戏,游戏。