Less 延伸

extend 是一個 Less 僞類，它經過使用:extend 選擇器在一個選擇器中擴展其餘選擇器樣式。

擴展語法

擴展能夠是附加到選擇器，也能夠是集中放置在規則，看上去像是帶有選擇器參數的可選僞類，而後緊跟關鍵字 all 。

// 第一個塊和第二個塊作一樣的事
    .x:extend(.y) {}
    .x{ &:extend(.y);}
    
    // 擴展 .y 元素選擇器的全部實例
    .x:extend(.y all){}
    
    // 僅擴展選擇器輸出爲 .y 的實例
    .x:extend(.y){}

擴展附加到選擇器

附加到選擇器的擴展在咱們看來像是一個普通的僞類，帶有選擇器做爲參數，一個選擇器能夠包含多個extend子句，可是全部擴展都必須在選擇器的末尾。

• 在選擇器以後擴展：pre:hover:extend(div pre)。
• 選擇器和擴展之間容許有空格：pre:hover :extend(div pre)。
• 容許多個擴展：pre:hover:extend(div pre):extend(.bucket tr)。
• 不容許的：pre:hover:extend(div pre).nth-child(odd)，擴展必須是最後一個。

若是規則集中包含多個選擇器，那麼它們中的任何一個均可以是具備extend關鍵字的，在一個規則集中擴展的多個選擇器。

.xkd_first,
    .xkd_second:extend(.vue),
    .xkd_three:extend(.python){
        // 內容代碼
    }

擴展內側規則

語法使用：&:extend(selector)，將擴展放置到主體中是將它放入這個規則集的每一個選擇器的快捷方式。

// 在體內延伸
    pre:hover,.xkd_extend{
        &:extend(div pre);
    }
    
    // 與在每一個選擇器以後添加擴展名徹底相同
    pre:hover:extend(div pre){
        .xkd_extend:extend(div pre){}
    }

擴展嵌套選擇器

擴展可以匹配的嵌套的選擇器，減小如下內容。

// 帶目標選擇器的嵌套規則集
    .xkd{
        tr{
            background:green;
            font-size:30px;
        }
    }
    .xkd_extend:extend(.xkd tr){}
    
    // 輸出
    .xkd tr,.xkd_extend{
        background:green;
        font-size:30px;
    }
    // 從本質上講，擴展將查看已編譯的CSS，而不是原始的CSS

精確匹配擴展

默認狀況下，extend查找選擇器之間的精確匹配。

選擇器是否使用前導星是很重要的，不論是第n個表達式有沒有相同的含義，它們都須要有相同的形式才能匹配，惟一的例外是屬性選擇器中的引號，less 知道它們具備相同的含義並與之匹配。

//　.y 選擇器與它上面的全部選擇器都不匹配
    .x.xkd,
    .xkd.x,
    .xkd > .x{
        font-size:30px;
    }
    .y:extend(.xkd){}
    
    // 選擇器 *.class 和 .class 是等效的，可是擴展名與之並不匹配
    *.v3Xkd{
        font-size:30px;
    }
    .v2Xkd:extend(.v3Xkd){}

僞類的順序很重要，好比選擇器：link:hover:visited 和 link:visited:hover 二者匹配的元素集是相同的，可是extend將它們視爲了避免同的元素。

// link:hover:visited
    link:hover:visited{
        color:green;
    }
    .selector:extend(link:visited:hover){}
    
    // 輸出
    link:visited:visited{
        color:green;
    }

第n個表達式

第n個表達形式很重要，n個表達式 1n+3 和 n+3 是等價的，可是extend與它們是不匹配的。

:nth-child(1n+3){
        font-size:30px;
    }
    .element:extend(:nth-child(n+3)){}
    
    // 輸出
    :nth-child(1n+3){
        font-size:30px;
    }

屬性選擇器中的引用類型是可有可無的，好比 [title=identifier]、[title='identifier']、[title="identifier"]這三者，帶引號，單引號仍是雙引號它們都是等效的，也就是說它們輸出的值也是同樣的。

所有擴展

當在 extend參數中最後被指定all 關鍵字時，它會告訴 Less 將這個選擇器做爲另外一個選擇器的一部分進行匹配，選擇器將會被賦值，而後僅將選擇器的匹配部分替換爲擴展名，從而創建一個新的選擇器。

.x.y.z,
    .z.xkd {
      color: red;
    }
    .z {
      &:hover {
        color: green;
      }
    }
    .all:extend(.z all) {}
    
    // 輸出
    .x.y.z,
    .z.xkd,
    .x.y.all,
    .all.xkd {
      color: red;
    }
    .z:hover,
    .all:hover {
      color: green;
    }

帶擴展的選擇器插值

extend不可以匹配帶有變量的選擇器，若是選擇器包含變量，它將會把該變量忽略掉；這是一個未定的特性，可是不會輕易改變，可是extend能夠鏈接插入性選擇器。

如下是一個示例的對比：

// 1:包含變量的選擇器將不會被匹配：
    @var: .xkd_v3;
    //插入性選擇器
    @{var}{  
        color: green;
    }
    //不作任何事
    .xkd_v2:extend(.xkd_v3){}
    
    // 2:在目標選擇器進行extend中使用變量將不會被匹配
    .xkd_v3{
        color: green;
    }
    // 匹配不到選擇器
    .xkd_v2:extend(@{var}){}
    @var: .xkd_v3;

上面的Less代碼都將被編譯爲：

.xkd_v3{
        color: green;
    }

除此以外，:extend能夠鏈接到插入性選擇器，也就是說上面代碼中的 .xkd_v3 選擇器能夠包含變量，可是 .xkd_v2 選擇器不能包含變量。

在@media中範圍/擴展

在媒體聲明內編寫的擴展應該只與同一媒體聲明內的選擇器匹配，也就是說寫在一個media聲明中的extend只能匹配在同一個media裏面的選擇器 。

重複檢測

如今是沒有重複檢測的功能，因此在使用extend的時候須要注意不要extend具備相同規則的選擇器。

使用狀況

• 典型用例
  經典的用例就是爲了不添加一個基類

  .xkd{
          color: green;
          font-size: 30px;
      }
      .xkd_v2{
          .xkd;
      }
      .xkd_v3{
          .xkd;
      }
      
      編譯爲：
      .xkd,
      .xkd_v2,
      .xkd_v3{
          color: green;
          font-size: 30px;
      }

• 減少css大小
  Mixins將全部屬性複製到選擇器中，這可能致使沒必要要的重複，所以咱們可使用擴展而不是混合來將選擇器上移到咱們要使用的屬性，從而減小生成的CSS。

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

• 組合樣式/更高級的混合
  另外一種使用狀況是做爲mixin的一種替代方法，由於mixin只能用在建檔的選擇器，若是在HTML中有兩個不一樣的塊(block)，可是須要應用同一個樣式，那麼這時候咱們就可使用extend去連接兩個塊元素。

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