作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法。这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS。less文件是以less作为文件后缀名,HTML引用时可以像css那样引用,如下:
注意:本文描述的一切都是基于1.4.0版本,除非有特殊标明。
变量的作用就是把值定义在一个地方,然后在各处使用,这样能让代码更易维护,如下:
<span style="color: #800000;">// Variables @link-color: #428bca; // sea blue // 用法 a:link </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> @link-color</span>; }<span style="color: #800000;"> .widget </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> @link-color</span>; }
上面代码将颜色#428bca赋给一个变量@link-color,然后在color属性中使用变量,对应的css如下:
<span style="color: #800000;">a:link </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #428bca</span>; }<span style="color: #800000;"> .widget </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> #428bca</span>; }
变量不仅可以用在属性值上,也可以用在选择元素名,属性名(1.6.0支持),url和import方法。如下:
选择元素名:
<span style="color: #800000;">// Variables @mySelector: banner; // Usage .@</span>{<span style="color: #ff0000;">mySelector</span>} {<span style="color: #ff0000;"> font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0 auto</span>; }
编译后为
<span style="color: #800000;">.banner </span>{<span style="color: #ff0000;"> font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0 auto</span>; }
url:
<span style="color: #800000;">// Variables @images: "../img"; // 用法 body </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #444</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> url("@{images</span>}<span style="color: #800000;">/white-sand.png"); }</span>
编译后
<span style="color: #800000;">body </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #444</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> url("../img/white-sand.png")</span>; }
@import:
<span style="color: #800000;">// Variables @themes: "../../src/themes"; // Usage @import "@</span>{<span style="color: #ff0000;">themes</span>}<span style="color: #800000;">/tidal-wave.less";</span>
编译后
<span style="color: #800000;">@import "../../src/themes/tidal-wave.less";</span>
属性名:
<span style="color: #800000;">@property: color; .widget </span>{<span style="color: #ff0000;"> @{property</span>}<span style="color: #800000;">: #0ee; background-@</span>{<span style="color: #ff0000;">property</span>}<span style="color: #800000;">: #999; }</span>
编译后
<span style="color: #800000;">.widget </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #0ee</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #999</span>; }
变量的变量名也可以是变量,如下:
<span style="color: #800000;">@fnord: "I am fnord."; @var: "fnord"; content: @@var;</span>
编译后
<span style="color: #800000;">content: "I am fnord.";</span>
变量支持延迟加载,所以你可以在变量定义之前使用。如下:
<span style="color: #800000;">.lazy-eval </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> @var</span>; }<span style="color: #800000;"> @var: @a; @a: 9%;</span>
或者
<span style="color: #800000;">.lazy-eval-scope </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> @var</span>;<span style="color: #ff0000;"> @a</span>:<span style="color: #0000ff;"> 9%</span>; }<span style="color: #800000;"> @var: @a; @a: 100%;</span>
上面两个都会被编译成如下
<span style="color: #800000;">.lazy-eval-scope </span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 9%</span>; }
问什么第二个也会被编译成上面的css,这是因为当一个变量被定义两次时,最后一次定义的生效。就类似于css中,对同一个元素定义不同的css样式,最后定义的生效。再比如下面这个
<span style="color: #800000;">@var: 0; .class1 </span>{<span style="color: #ff0000;"> @var</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;"> .class { @var</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;"> three</span>:<span style="color: #0000ff;"> @var</span>;<span style="color: #ff0000;"> @var</span>:<span style="color: #0000ff;"> 3</span>; }<span style="color: #800000;"> one: @var; }</span>
编译后
<span style="color: #800000;">.class1 .class </span>{<span style="color: #ff0000;"> three</span>:<span style="color: #0000ff;"> 3</span>; }<span style="color: #800000;"> .class </span>{<span style="color: #ff0000;"> one</span>:<span style="color: #0000ff;"> 1</span>; }
扩展选择器是less的伪类选择器,他会复制当前选择器,定义新的样式,而原来的不便
<span style="color: #800000;">nav ul </span>{<span style="color: #ff0000;"> &</span>:<span style="color: #0000ff;">extend(.inline)</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> .inline </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }
编译后
<span style="color: #800000;">nav ul </span>{<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> .inline, nav ul </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }
<span style="color: #800000;">.a:extend(.b) </span>{}<span style="color: #800000;"> 也可以这样使用 .a </span>{<span style="color: #ff0000;"> &</span>:<span style="color: #0000ff;">extend(.b)</span>; }
<span style="color: #800000;">.e:extend(.f) </span>{}<span style="color: #800000;"> .e:extend(.g) </span>{}<span style="color: #800000;"> // 上面等价于下面 .e:extend(.f, .g) </span>{}
<span style="color: #800000;">.bucket </span>{<span style="color: #ff0000;"> tr { color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> } .some-class:extend(.bucket tr) </span>{}
编译后
<span style="color: #800000;">.bucket tr, .some-class </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> blue</span>; }
<span style="color: #800000;">.a.class, .class.a, .class > .a </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> .test:extend(.class) </span>{}<span style="color: #800000;"> // 不会匹配任何选择</span>
<span style="color: #800000;">:nth-child(1n+3) </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> .child:extend(n+3) </span>{}
编译后
<span style="color: #800000;">:nth-child(1n+3) </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> blue</span>; }
注意:1n+3与n+3在css中是等价的,但是在less中不等价。
<span style="color: #800000;">[title=identifier] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> [title='identifier'] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> [title="identifier"] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> .noQuote:extend([title=identifier]) </span>{}<span style="color: #800000;"> .singleQuote:extend([title='identifier']) </span>{}<span style="color: #800000;"> .doubleQuote:extend([title="identifier"]) </span>{}
编译后
<span style="color: #800000;">[title=identifier], .noQuote, .singleQuote, .doubleQuote </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> [title='identifier'], .noQuote, .singleQuote, .doubleQuote </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> [title="identifier"], .noQuote, .singleQuote, .doubleQuote </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> blue</span>; }
注意:less中不区分单引号双引号
<span style="color: #800000;">.a.b.test, .test.c </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> orange</span>; }<span style="color: #800000;"> .test </span>{<span style="color: #ff0000;"> &</span>:<span style="color: #0000ff;">hover { color: green</span>; }<span style="color: #800000;"> } .replacement:extend(.test all) </span>{}
编译后
<span style="color: #800000;">.a.b.test, .test.c, .a.b.replacement, .replacement.c </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> orange</span>; }<span style="color: #800000;"> .test:hover, .replacement:hover </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> green</span>; }
<span style="color: #800000;">@variable: .bucket; @</span>{<span style="color: #ff0000;">variable</span>} {<span style="color: #ff0000;"> // interpolated selector color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> .some-class:extend(.bucket) </span>{}<span style="color: #800000;">// 不会匹配任何选择元素</span>
<span style="color: #800000;">.bucket </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> .some-class:extend(@</span>{<span style="color: #ff0000;">variable</span>}<span style="color: #800000;">) </span>{}<span style="color: #800000;"> // 不会匹配任何元素 @variable: .bucket;</span>
注意:extend不匹配变量。
<span style="color: #800000;">@media print </span>{<span style="color: #ff0000;"> .screenClass</span>:<span style="color: #0000ff;">extend(.selector) {</span>}<span style="color: #800000;"> // extend inside media .selector </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> black</span>; }<span style="color: #800000;"> } .selector </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }<span style="color: #800000;"> @media screen </span>{<span style="color: #ff0000;"> .selector { color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> }</span>
编译后
<span style="color: #800000;">@media print </span>{<span style="color: #ff0000;"> .selector, .screenClass { color</span>:<span style="color: #0000ff;"> black</span>; }<span style="color: #800000;"> } .selector </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }<span style="color: #800000;"> @media screen </span>{<span style="color: #ff0000;"> .selector { color</span>:<span style="color: #0000ff;"> blue</span>; }<span style="color: #800000;"> }</span>
注意:extend只能匹配@media中前面定义的,在后面定义的将忽略。
在开发中我们会定义一些通用样式,然后单独样式在添加class,使用css的后面覆盖前面的原理来实现样式。extend也可以实现这种效果,如下:
<span style="color: #800000;">.animal </span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> black</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> white</span>; }<span style="color: #800000;"> .bear </span>{<span style="color: #ff0000;"> &</span>:<span style="color: #0000ff;">extend(.animal)</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> brown</span>; }
<span style="color: #800000;">.my-inline-block() </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;"> .thing1 </span>{<span style="color: #ff0000;"> .my-inline-block; </span>}<span style="color: #800000;"> .thing2 </span>{<span style="color: #ff0000;"> .my-inline-block; </span>}
编译后:
<span style="color: #800000;">.thing1 </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;"> .thing2 </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 0</span>; }
使用extend
<span style="color: #800000;">.my-inline-block </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;"> .thing1 </span>{<span style="color: #ff0000;"> &</span>:<span style="color: #0000ff;">extend(.my-inline-block)</span>; }<span style="color: #800000;"> .thing2 </span>{<span style="color: #ff0000;"> &</span>:<span style="color: #0000ff;">extend(.my-inline-block)</span>; }
编译后
<span style="color: #800000;">.my-inline-block, .thing1, .thing2 </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 0</span>; }