一、变量详解
Variables，在一个地方用来控制常用的值。
css样式表中经常看到在一个值被重复使用了许多次，变量就是在一个地方控制元素的值，以便代码更简单地进行维护。
// Variables
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);
.header{
.menu{
a{color:@link-color;}
a:hover{color:@link-color-hover;}
}
h1{color:@link-color;}
}
/**outputs**/
.header .menu a {
color: #428bca;
}
.header .menu a:hover {
color: #3071a9;
}
.header h1 {
color: #428bca;
}
变量不止可以像上面一样用来控制css规则中的值，也可以在别的地方使用，例如选择器名、属性名、URLs和@import声明。
@my-selector:menu;
.@{my-selector}{
font-weight:bold;
font-size:16px;
}
/**outputs**/
.menu {
font-weight: bold;
font-size: 16px;
}
/**url**/
@images:"img";
body{background:url("@{images}/desk_01.jpg");}
/**outputs**/
body {
background: url("file:///E:/BaiduYunDownload/Less/doc/img/desk_01.jpg");
}
/**import**/
@themes:"common";
@import "@{themes}/styles.less";
/**输出的样式表中包含原有样式和styles中的样式**
/**Properties**/
@property:color;
.header {@{property}:#0ee;background-@{property}:#ffa;}
/**outputs**/
.header {
color: #0ee;
background-color: #ffa;
}
/**Variable Names**/
@fnord: "I am fnord.";
@var: "fnord";
.header{
h2{content: @@var;}
}
/**outputs**/
.header h2 {
content: "I am fnord.";
}
二、Extend扩展
扩展是less的一个伪类，它将自身所有的选择器与它引用的选择器进行融合。
.inline{display:inline;}
.nav ul li{
&:extend(.inline);
color:red;
}
/**outputs**/
.inline,
.nav ul li {
display: inline;
}
.nav ul li {
color: red;
}
上面的输出结果中，:extend选择器它的将扩展选择器（.nav ul li）放置在.inline选择器出现的地方。声明块保持原样，并且对extend没有任何引用。
如果extend块中没有别的样式属性，它将不会出现在输出结果中。
.inline{display:inline;}
.nav ul li{
&:extend(.inline);
}
/**outputs**/
.inline,
.nav ul li {
display: inline;
}
Extend语法
extend既可以使用在选择器上，也可以放置在一个样式属性规则中。它看似一个拥有选择器参数和可选关键字all的伪类。
.a:extend(.b) {}
// the above block does the same thing as the below block
.a {
&:extend(.b);
}
.c:extend(.d all) { // extends all instances of ".d" e.g. ".x.d" or ".d.x" }
.c:extend(.d) { // extends only instances where the selector will be output as just ".d" }
参数中使用all关键字的时候，会把所有选择器中含有对应参数的样式扩展进来。
.inline{display:inline;}
.para.inline{background:blue;}
.section:extend(.inline all){}
/**outputs**/
.inline,
.section {
display: inline;
}
.para.inline,
.para.section {
background: blue;
}
Extend Attached to Selector,附加到选择器上的扩展
看起来类似一个有选择器参数的普通伪类，一个选择器可以包含多个伪类语句，但所有的伪类语句必须放在选择器的最后。
- extend位于选择器之后，
pre:hover:extend(div pre). - 选择器和extend之间可以有空格，
pre:hover :extend(div pre). - 允许多层extend语句，
pre:hover:extend(div pre):extend(.bucket tr)等价于 pre:hover:extend(div pre, .bucket tr) - extend必须放在最后，右侧例子是不允许的：pre:hover:extend(div pre).nth-child(odd)
.inline{display:inline;}
.hover{color:green;}
.bgred{background:red;}
.section:extend(.inline):extend(.bgred){}
.section:hover:extend(.hover){}
/**outputs**/
.inline,
.section {
display: inline;
}
.hover,
.section:hover {
color: green;
}
.bgred,
.section {
background: red;
}
Extend Inside Ruleset，规则集中扩展
使用&:extend(selector) 语法，将extend放在一个规则集的正文中。采用简写&的方式，将extend放在规则集的每个选择器中。
pre:hover,
.some-class {
&:extend(div pre);
}
/**等价于**/
pre:hover:extend(div pre),
.some-class:extend(div pre) {}
Extending Nested Selectors，嵌套选择器扩展
.nav{
.para{font-size:20px;}
}
.section:extend(.nav .para){}//空格不能少
/**outputs**/
.nav .para,
.section {
font-size: 20px;
}
Exact Matching with Extend，与扩展完全匹配
less默认查找选择器间的完全匹配，无论选择器是否使用了*，或者具有相同含义nth-表达式，less只关心选择器是否有相同的形态以用来匹配。
唯一例外的是属性选择器中的引用，less知道它们拥有相同的意义，然后用做匹配。
.a.class,
.class.a,
.class > .a {
color: blue;
}
.test:extend(.class) {} // this will NOT match the any selectors above
//*.class和.class匹配相同的规则集,但extend认为不匹配
*.class {
color: blue;
}
.noStar:extend(.class) {} // this will NOT match the *.class selector
//伪类中的排序也有影响，尽管link:hover:visited和link:visited:hover匹配相同的规则集，但extend认为不匹配
link:hover:visited {
color: blue;
}
.selector:extend(link:visited:hover) {}
//Nth-expressions 1n+3 and n+3 are equivalent, but extend will not match them
:nth-child(1n+3) { color: blue; }
.child:extend(:nth-child(n+3)) {}
//属性引用选择器的几种写法是等价的，extend都可以匹配，下面的例子中[title="identifier"]定义的样式覆盖了上面两种样式
[title=identifier] {
color: blue;
}
[title='identifier'] {
color: red;
}
[title="identifier"] {
color: green;
}
.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}
/**outputs**/
[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote {
color: blue;
}
[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote {
color: red;
}
[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
color: green;
}
Extend "all",扩展关键字all
当你在less的参数中指定在最后的all关键字时，这将使less匹配作为别的选择器中一部分的元素。
输出结果中，原来的选择器会复制过来，匹配的那部分选择器会被less扩展作为一个新的选择器替换掉。
.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}
.replacement:extend(.test all) {}
/**outputs**/
.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
color: orange;
}
.test:hover,
.replacement:hover {
color: green;
}
Selector Interpolation with Extend，选择器差值扩展
extend无法匹配变量选择器，但它可以附加在变量定义的选择器上。
@variable: .bucket;
@{variable} { // interpolated selector
color: blue;
}
.some-class:extend(.bucket) {} // does nothing, no match is found
.bucket {
color: blue;
}
.some-class:extend(@{variable}) {} // interpolated selector matches nothing
@variable: .bucket;
//匹配变量选择器
.bucket {
color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;
/**outputs**/
.bucket, .selector { color: blue; }
Scoping / Extend Inside @media，@media中的范围和扩展
写在media声明中的extend只能匹配media声明范围内的选择器。
//在同一个media声明中，extend将与之匹配
@media screen{
.media{color:red;}
.replacement:extend(.media){}
}
/**outputs**/
@media screen {
.media,
.replacement {
color: red;
}
}
//写在外面的，无法匹配
@media screen{
.replacement:extend(.media){}
}
.media{color:red;}
//不会匹配写在嵌套的media中的选择器
@media screen{
@media(min-768px){.media{color:red;}}
.replacement:extend(.media){}
}
//写在media外面的扩展将匹配嵌套media中的所有可匹配选择器。
@media screen{
@media(min-768px){.media{color:red;}}
.media{background:#ffa;}
}
.replacement:extend(.media){}
/**outputs**/
@media screen {
.media,
.replacement {
background: #ffa;
}
}
@media screen and (min- 768px) {
.media,
.replacement {
color: red;
}
}
Duplication Detection,重复检测
extend扩展的选择器没有重复检测。当它的参数选择器在同一个规则集中时，会匹配多次。
.border,.media{background:#ffa;}
.replacement:extend(.media,.border){}
/**outputs**/
.border,
.media,
.replacement,
.replacement {
background: #ffa;
}
Classic Use Case,经典用例
经典用例用来避免添加基类。例如现有样式
.animal {
background-color: black;
color: white;
}
这时，一个子类型的animal需要重写background-color属性，有两种方法可以实现，第一种：给html元素添加两个类，然后重写对应的属性。
<a class="animal bear">Bear</a> .animal { background-color: black; color: white; } .bear { background-color: brown; }
第二种：简化html写法，只添加一个样式类，然后给它使用extend
<a class="bear">Bear</a> .animal { background-color: black; color: white; } .bear { &:extend(.animal); background-color: brown; }
Reducing CSS Size,减少css大小
混合类会将所有属性复制到对应的选择器中，造成不必要的重复。因此你可以使用extend来代替混合类，将选择器放置到需要的样式属性集中。
.my-inline-block() {
display: inline-block;
font-size: 0;
}
.thing1 {
.my-inline-block;
}
.thing2 {
.my-inline-block;
}
/**outputs**/
.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);
}
/**outputs**/
.my-inline-block,
.thing1,
.thing2 {
display: inline-block;
font-size: 0;
}
Combining Styles / A More Advanced Mixin,组合样式，更高级的混合类
extend的另一个用例是作为混合类的替代
.nav ul>li{
color:red;
}
.replacement{
&:extend(.nav ul>li);
}
/**outputs**/
.nav ul > li,
.replacement {
color: red;
}