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