Less的Extend_Less繼承

Extend就相當於Java的繼承，它允許一個選擇器繼承另一個選擇器的樣式。Extend有兩種語法格式。

一種是：

1. <selector>:extend(<parentSelector>) { }

另一種是：

1. <selector> {
2. &:extend(<parentSelector>);
3. }

假設有一個 .inline 的類：

1. .inline {
2.     color: red;
3. }

現在希望 nav ul 選擇器能夠讓繼承 .inline類的 color 屬性，就可以使用以下兩種方式的任意一種來實現：

1. nav ul:extend(.inline) {
2. }

或者

1. nav ul {
2.     &:extend(.inline);
3. }

這兩種方式得到的結果完全相同，編譯后的CSS代碼為：

1. .inline,
2. nav ul {
3.   color: red;
4. }

一個選擇器還可以繼承多個選擇器的屬性，只需寫多個 :extend 語句就可以了。如，.e 同時繼承了 .f 和 .g 的屬性：

1. .e:extend(.f) {}
2. .e:extend(.g) {}

為了方便，Less允許僅使用一個 :extend 語句，只需在括號中提供用逗號隔開的選擇器列表即可。什么兩個 :extend 語句的等價寫法為：

1. .e:extend(.f, .g) {}