less 函式 Less 混合

本節我們學習 less 中的混合（mixin），混合是一種將一組屬性從乙個規則集包含或混入到另乙個規則集的方法。簡單一點來說，其實混合就有點類似程式語言中的函式，通過這種方式，可以在**中實現復用。如果還不懂，下面我們通過實際例子來看一下混合的使用。

我們先來看下面這段 less **：

.xkd .good

可以很明顯的看到，.xkd樣式類中的**，.good樣式類中也有，這裡是只有兩個樣式類，如果有很多個選擇器時，是不是就會造成很多重複的**，那麼可不可以解決這個問題呢？

混合mixin就可以幫助我們來解決這個問題，實現**的復用。使用起來也很簡單，只需要在.good中引用.xkd即可：

.xkd .good

然後我們執行lessc命令，將這段 less **編譯成 css **：

.con .bot

這個是不是很方便，並且一般為了區分**，我們會在被引用的樣式類後面要加乙個小括號()，例如：

.xkd .good

這和函式中的呼叫很像，同乙個函式可以被多次呼叫，同乙個樣式類也可以被多次引用。

上面這個例子中，我們可以看到在編譯時，.xkd和.good兩個樣式類都被編譯成了 css **，但是某些時候有可能這有可能造成重複，所以我們可能不希望.xkd樣式類本身被編譯到 css 檔案中，這要怎麼做呢。

要實現這個目的，我們可以在定義樣式類時，在樣式類名稱後面加上一對小括號()，就像定義函式一樣，如果不被呼叫就不會執行。

同樣是上面這段 less **，只不過我們在.xkd後面加上了一對小括號：

.xkd()
.good

此時來編譯上述**，輸出的 css 如下所示：

.good

可以看到，.xkd()中的**在編譯時被忽略，沒有被輸出。

例如下面這段**，.banner樣式類中還有乙個.banner-p，而當我們在.foot中引用.banner樣式類時，會不會同時引用.banner-p的樣式呢，一起來看一下：

.banner()
}.foot

編譯成 css **：

.foot .foot .banner-p

從這段編譯後的 css **中我們可以看出，引用乙個 mixins 的同時也會復用其中的屬性和選擇器。

less 中也有命名空間的概念，命名空間用於在通用名稱下對 mixins 進行分組，使用命名空間可以避免名稱衝突，並從外部封裝 mixins 組。

例如可以將類選擇器或者id選擇器作為乙個命名空間，然後將 mixins 放在命名空間中，這樣可以避免與引入的其他檔案造成衝突，例如：

.name_space
}.good

編譯成 css **：

.name_space .xkd .good

我們在引用命名空間內的樣式時，除了上面這種寫法，使用下面幾種寫法也是一樣的效果：

.name_space > .xkd();
.name_space.xkd;
.name_space.xkd();
.name_space .xkd;
.name_space .xkd();

!important關鍵字用於覆蓋特定屬性。如果我們在 mixins 引用後面加上!important關鍵字，則會將 mixins 中的所有屬性標記為!important。

html **：

建立乙個 less 檔案，內容如下，將混合使用!important關鍵字標記：

.mixin()
h1

編譯成 css **：

h1

會優先應用使用!important關鍵字標記的屬性，在瀏覽器中演示效果：

本節我們主要學習 less 中的 mixins，mixins 的使用其實很簡單。我們需要注意的是，如果 mixins 名稱後面不加小括號，則會編譯到 css 中。如果加上小括號，則不會被編譯。

在引用 mixins 時，加不加小括號都可以，但是推薦最好加上小括號，這是為了區分**，避免混淆。