Less繼承深度剖析

一、Less繼承方法

Less是一種CSS預處理器，它提供了很多CSS所不具備的特性，比如變量、函數、混合器等。其中，繼承是Less最為強大的特性之一。涉及到繼承，我們可以通過三種方法來實現對代碼的重用。

一、@extend繼承方法

.child {
  font-size: 12px;
}

.parent {
  &:extend(.child);
  color: red;
}

通過@extend語句，我們可以使.parent繼承.child的全部屬性。這時候.parent將具有繼承的屬性font-size:12px，同時還將添加新的屬性color:red。

二、繼承servlet

另外，Less還支持繼承類似Java中的servlet。這種繼承方式可以使父級選擇器中的所有屬性和選擇器全部被繼承到子選擇器中去。

.parent {
  .child {
    color: red;
  }
}
.new-child:extend(.parent);

這裡，.new-child將從.parent中繼承.color:red和.child選擇器。

三、JS繼承

通過Less提供的js方法，我們還可以擴展基本的CSS屬性和自定義的屬性。

(@bg: red;) 

DIV {
  background-color: @bg;
  .a {
    background-color: @bg;
  }
  H1 {
    background-color: yellow;
    &-inner {
      background-color: @bg;
    }
  }
}

在上述代碼中，@bg是一個Less變量，我們可以將其定義為red。然後，我們可以通過使用變量名來獲取這個值，達到樣式重用的目的。

二、Less繼承方式

一、字符串選擇器

在Less中，我們可以使用字符串選擇器，即兩個引號包含的內容，作為選擇器。這種方式適用於那些無法通過普通的選擇器來找到的元素，比如HTML5自定義元素。

@element: ~"x-my-element";

@{element} {
  display: flex;
}

在上面的示例中，我們定義了一個名為x-my-element的HTML5自定義元素。然後，我們使用@{element}，將其作為選擇器來設置樣式。

二、逗號分割選擇器

在Less中，我們還可以使用逗號分割選擇器來對多個選擇器進行繼承。

.parent-1, .parent-2 {
  color: red;
}

.child:extend(.parent-1, .parent-2) {
  font-size: 12px;
}

通過逗號分割，我們可以一次性為多個選擇器添加相同的樣式，這樣就不用重複寫多次了。

三、Less繼承父級樣式

在Less中，還有一種特殊的繼承方式，即繼承父級樣式。這種繼承方式通常適用於嵌套樣式的情況，可以繼承到其外層所有樣式。

.parent {
  color: red;
  .child:extend(&) {
    font-size: 12px;
  }
}

在上述代碼中，&代表父選擇器，.child:extend(&)將繼承父級樣式，即color:red。這種方式通常能大大簡化CSS代碼。

四、Less繼承嵌套樣式

在Less中，我們還可以將繼承和嵌套結合起來使用。這種方式可以方便我們對於複雜樣式的重用和編輯。

.parent {
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .child {
    &:extend(.center);
    width: 100px;
    height: 100px;
  }
}

通過嵌套樣式，我們很直觀地看出.parent的子類.child繼承了.parent中.center的所有樣式。這樣，我們就可以方便地將.center樣式集中起來，便於維護。

五、Less繼承只能有一個嗎

在Less中，我們可以使用多個繼承語句來繼承多個選擇器，但是，一個選擇器只能被繼承一次。在繼承同一個選擇器兩次時，Less會報錯。

.parent {
  color: red;
}
.child:extend(.parent), .child2:extend(.parent) {
  font-size: 12px;
}

通過逗號分割，我們可以一次為多個選擇器添加相同的樣式，但是如果多個子選擇器同時繼承了同一個選擇器，則會造成代碼冗餘，也可能引起錯誤。