动态的样式语言less语法详解之变量与extend

或者

复制代码
.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 {