extend這一部分真的看得我不知道要怎么說明好，難怪less中文網這一部分完全沒有翻譯。看著一部分的時候感覺無從下口啊，好些地方都覺得好違和，講不清楚的感覺，所以文中用到extend的地方均使用英文的extend。在第三次閱讀的時候，突然才發現extend有一些Java中繼承的感覺，所以最后就決定將extend翻譯成繼承，有稍微了解過Java繼承的簡單概念的小伙伴，應該很容易就理解extend的作用和原理。也自行定義了兩個選擇器A和B，選擇器A和B的引入方便文中解釋的理解，也方便我的表達，所以要先記住選擇器A和B的定義再看下面的內容會好理解很多，當然最好的就是結合英文原文一起學習，如果有更好的理解也歡迎多多提出。還是有部分解釋講解的不夠清晰，爭取全部學習結束后再次整理下。

繼承（Extend）

Extend可以理解成一種less的偽類，形式為A:extend(B)，其作用：使用這個偽類選擇器(A)可以將符合其條件的選擇器(B)的樣式規則引用給自身用，即A會擁有B的樣式規則。

（A:extend（B））下面會用A泛指使用extend偽類的選擇器，用B泛指extend偽類所去匹配的選擇器。

發布于v1.4.0

nav ul{
    &:extend(.inline);
    background: blue;
}

上面設置的規則中，：extend 這個偽類會把“使用extend的選擇器”（nav ul）擁有 .inline 的規則。如果.inline這個選擇器不存在，那么A選擇器的聲明代碼塊將會保持原樣，但是extend語句將無效（因為extend不是css）

nav ul{
    &:extend(.inline);
    background: blue;
}
.inline{
    color: red;
}

編譯為：

nav ul{
    background: blue;
}
.inline,nav ul{
    color: red;
}

注意到 nav ul:extend(.inline) 選擇器編譯成nav ul的過程 - 在編譯之前，選擇器中的extend偽類的那個語句會被移除，其余的語句保持原樣。如果extend中的B選擇器沒有樣式，那么extend在編譯過程中會被移除（但是extend有可能會影響其他的選擇器）。

Extend語法

Extend要么接在選擇器后面要么放置在規則中。看起來很像是偽類選擇器，并且擁有一個可選的參數 all

.a:extend(.b){ ... }
//上面的代碼與下面的代碼編譯出來的一致
.a{
    &:extend(.b);
}

.c:extend(.d all){
    //包含了".d"的所有實例，例如：" .x.d"或者".d.x"
}
.c:extend(.d){
    //只包含一個實例，選擇器只會被編譯成 ".d"的實例
}

Extend中可以包含一個或者多個類，用逗號分隔

.e:extend(.f){...}
.e:extend(.g){...}
//上面和下面代碼的編譯結果一樣
.e:extend(.f,.g){...}

Extend使用方式

Extend的使用方式就像使用普通的偽類一樣，一個選擇器可以包含多個Extend，但是所有Extend都要放置在這個選擇器的末端。

• 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);
• 以下的用法是錯誤的：pre:hover:extend(div pre).nth-child(odd),Extend必須放在最末端

當多個選擇器擁有同一個樣式規則，每個選擇器都可以擁有獨自的Extend關鍵詞。下面為多個選擇器擁有一個規則的情況：

.big-division,
.big-bag:extend(bag),
.big-bucket:extend(bucket){
  ...
}

在規則中的Extend

Extend可以通過使用&:extend(selector)這個語法將extend放置在規則內部。將Extend放在規則內部是將Extend單獨作用在每個選擇器的簡化形式。

放在內部：
pre:hover,.some-class{
    &:extend(div pre);
    ...
}

等同于在每個選擇器中單獨添加Extend：
pre:hover:extend(div pre),
.some-class:extend(div pre){...}

Extend中使用嵌套選擇器

Extend允許使用嵌套選擇器（即B選擇器為嵌套形選擇器）：

.bucket{
    tr{
        color: blue;
    }
}
.some-class:extend(.bucket tr){ ... }

編譯為：
.bucket tr,
.some-class{
    color: blue;
}

Extend準確匹配

Extend默認會在所有選擇器中尋找與B選擇器匹配的選擇器，無論B選擇器是否使用*(星號)。如果兩個后代表達式(詳細看下一段)對應同一個元素，但是匹配的時候也是要根據后代表達式中的格式進行匹配。一個唯一的例外就是屬性選擇器的，less知道它們意思相同并且能進行匹配。

.a.class,.class.a,.class>.a{
    color: blue;
}
.test:extend(.class){ ... }//匹配不到上面的任何選擇器

*可以認為是任意選擇器。 *.class和.class是對應同一個元素數組，但是Extend進行匹配的時候不會將二者認為是同一個。

*.class{
    color: blue;
}
.test:extend(.class){ ... }//不會匹配到*.class這個選擇器

編譯為：
*.class{
    color: blue;
}

匹配時會根據偽類的順序。選擇器link:hover:visited和link:visited:hover匹配到的是同一個元素，但是Extend會區分它們。

link:visited:hover{
    color: blue;
}
.selector:extend(link:hover:visited){ ... }

編譯為：
link:visited:hover{
    color: blue;
}

后代表達式

匹配會根據后代表達式的形式進行匹配。后代表達式1n+3和n+3是相等的，但是Extend不會匹配二者。

:nth-child(1n+3){
    color: blue;
}
.child:extend(:nth-child(n+3)){ ... }

編譯為：
:nth-child(1n+3){
    color: blue;
}

屬性選擇器的引用類型不會進行匹配。下面的情況都相等。

[title=identifier]{
    color: blue;
}
or
[title='identifier']{
    color: blue;
}
or
[title="identifier"]{
    color: blue;
}
.noQuote:extend([title=identifier]){}
.singleQuote:extend([title='identifier']){}
.doubleQuote:extend([title="identifier"]){}

編譯為：
[title=indentifier],
.noQuote,
.singleQuote,
.doubleQuote{
    color: blue;
}
or
[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}
or
[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

Extend"all"

當你指定了Extend的最后一個參數為all時，less將會匹配一些名字包含B選擇器的名字的C選擇器，類似模糊匹配那樣。當匹配到選擇器后，C選擇器將會被復制，并且將C選擇器名字中匹配到的那部分替換B選擇器的名字，變成新的選擇器。

.a.b.test,
.test.c{
    color: green;
}
.test{
    &:hover{
        color: red;
    }
}
.replace:extend(.test all){}

編譯成：

.a.b.test,
.test.c,
.a.b.replace,
.replace.c{
    color: green;
}
.test:hover,
.replace:hover{
    color: red;
}

你可以將這個操作理解成做一個非破壞性的搜索和匹配

在Extend中使用選擇器插入（Selector Interpolation with Extend）

Extend不能夠匹配有變量的選擇器，如果選擇器包含變量，Extend將會將其忽略。
這是一個未定的特性，但是不會輕易改變。但是extend可以連接插入性選擇器（包含變量的選擇器A）。

包含變量的選擇器將不會被匹配：

@var: .bucket;
@{var}{  //插入性選擇器
    color: blue;
}
.some-class:extend(.bucket){}//不做任何事

在目標選擇器進行extend中使用變量將不會被匹配：

.bucket{
    color: blue;
}
.some-class:extend(@{var}){}//匹配不到選擇器
@var: .bucket;

上面兩個都會編譯成：

.bucket{
    color: blue;
}

然而，:extend可以連接到插入性選擇器：

.bucket{
    color: blue;
}
@{var}:extend(.bucket){}
@var: .test;

編譯為：
.bucket,.test{
    color: blue;
}

總結就是：A選擇器可以包含變量，但是B選擇器不能包含變量。

作用范圍/@media里面的extend

寫在一個media聲明中的extend只能匹配在同一個media里面的選擇器：

@media print{
    .screenClass:extend(.selector){}
    .selector{
        color: black;
    }
}
.selector{
    color: red;
}
@media screen{
    .selector{
        color: blue;
    }
}

編譯為：

@meida print{
    .screenClass,.selector{
        color: black;
    }
}
.selector{
    color: red;
}
@media screen{
    .selector{
        color: blue;
    }
}

寫在一個media聲明中的extend不會匹配到嵌套在里面的media聲明里面的選擇器：

@media screen{
    .selectorClass:extend(.selector){}
    @media (min-width: 768px){
        .selector{
            color: blue;
        }    
    }
}

編譯為：

@media screen and (min-width: 768px){
    .selector{
        color: blue;
    }
}

外部extend可以匹配范圍無限制，包括內部的嵌套media里面的選擇器：

@media screen{
    .selector{
        color: blue;
    }
    @media (min-width: 768px){
        .selector{
            color: red;
        }
    }
}
.topLevel:extend(.selector){}
編譯為：
@media screen{
    .selector,
    .topLevel{
        color: blue;
    }
}
@media screen and (min-width: 768px){
    .selector,
    .topLevel{
        color: red;
    }
}

重復檢測

現在是沒有重復檢測的功能。

.alert,.widget{ ... }
.test:extend(.alert, .widget){}

編譯為：

.alert,.widget,.test,.test{ ... }

所以在使用extend的時候需要注意不要extend具有相同規則的選擇器

extend的使用情況

• 典型使用情況

典型的使用情況是為了避免增加一個類：

如果你有一個類animal
.animal{
    background-color: black;
    color: white;
}
然后你想要通過復寫background-color這個屬性來得到一個animal的子類，那么HTML就會變成這樣：
<a class="animal bear">bear</a>
css樣式就會變成這樣：
.animal{
    background-color: black;
    color: white;
}
.bear{
    background-color: grey;
}
不然你可以在less中使用extend，那樣你的HTML就會變得很簡單：
<a class="bear">bear</a>
less就會為：
.animal{
    background-color: black;
    color: white;
}
.bear{
    &:extend(.animal);
    background-color: grey;
}

• 減少css大小

mixin將所有的屬性都復制到新的選擇器中，從而導致了不必要的重復。因此你可以使用extend去代替mixin將你想要用的屬性添加到新的選擇器中，從而減少css代碼。
使用mixin:

.mine{
    color: #fff;
    font-size: 16px;
}
.test1{
    .mine;
}
.test2{
    .mine;
}

編譯為：
.mine{
    color: #fff;
    font-size: 16px;
}
.test1{
    color: #fff;
    font-size: 16px;
}
.test2{
    color: #fff;
    font-size: 16px;
}

使用extend：

.mine{
    color: #fff;
    font-size: 16px;
}
.test1{
    &:extend(.mine);
}
.test2{
    &:extend(.mine);
}

編譯為：
.mine,
.test1,
.test2{
    color: #fff;
    font-size: 16px;
}

• 組合樣式/更先進的mixin

另一種使用情況是作為mixin的一種替代方法，因為mixin只能用在建檔的選擇器，如果在HTML中有兩個不同的塊(block)，但是需要應用同一個樣式，那么你就可以使用extend去鏈接兩個塊元素。

li.list >a{ ... }
button.list-style{
    &:extend(li.list>a);
}