DIV CSS 佈局教程網

在Sass中，我們可以使用“混合宏（mixin）”來處理經常被多個地方使用的相同的CSS代碼塊。混合宏，跟JavaScript中的函數很相似，我們可以稱之為“Sass中的函數”。

一、混合宏的定義和調用

在Sass中，我們使用“@mixin”來定義一個混合宏，然後使用“@include”來調用一個混合宏。

語法：

 
//定義一個混合宏
@mixin 混合宏名
{
    樣式屬性1:取值1;
    樣式屬性2:取值2;
    ……
}
//調用一個混合宏
選擇器
{
    @include 混合宏名;
}

說明：

Sass中的混合宏跟C語言的宏是非常相似的。所謂的“宏”，指的是可重用的代碼塊。

@mixin用來定義一個混合宏，@include用來調用一個混合宏。此外，@mixin跟CSS3中的@font-face和@media語法是一樣的。

舉例：

 
@mixin radius
{
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
#header
{
    color:red;
    @include radius;
}
#footer
{
    color:green;
    @include radius;
}

編譯出來的CSS代碼如下：

 
#header
{
    color: red;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#footer
{
    color: green;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

二、混合宏的參數

在Sass中，我們不僅可以定義“不帶參數的混合宏”，也可以定義“帶參數的混合宏”。其中，混合宏的參數可以是1個，也可以是N個。

舉例：帶一個參數的混合宏

 
@mixin radius($radius)
{
    border-radius:$radius;
    -webkit-border-radius:$radius;
    -moz-border-radius:$radius;
}
#header
{
    color:red;
    @include radius(3px);
}
#footer
{
    color:green;
    @include radius(5px);
}

編譯出來的CSS代碼如下：

 
#header
{
    color: red;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
#footer
{
    color: green;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

舉例：帶多個參數的混合宏

 
@mixin center($width,$height)
{
    width: $width;
    height: $height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -($height) / 2;
    margin-left: -($width) / 2;
}
div
{
    @include center(100px,80px);
}

編譯出來的CSS代碼如下：

 
div 
{
    width: 100px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -50px;
}

分析：

這個混合宏裡面的CSS代碼是一個功能代碼塊，是用來同時實現元素的水平居中和垂直居中的。在實際開發中，對於這些功能代碼塊，我們都是配合混合宏（mixin）來使用，非常的簡單快速。現在大家體會到Sass比純CSS強大的地方了吧。對於這種開發技巧，更多請參考“HTML和CSS進階教程”中的“第13章 CSS技巧”。

在Sass中，我們還可以為混合宏傳遞的參數定義默認值。混合宏參數的默認值，跟變量的默認值是非常相似的，小伙伴們記得對比一下，這樣更能加深理解和記憶。

舉例：參數帶默認值

 
@mixin radius($radius:3px)
{
    border-radius:$radius;
    -webkit-border-radius:$radius;
    -moz-border-radius:$radius;
}
#header
{
    color:red;
    @include radius;
}
#footer
{
    color:green;
    @include radius(5px);
}

編譯出來的CSS代碼如下：

 
#header
{
    color: red;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
#footer
{
    color: green;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

分析：

在這個例子中，我們給“混合宏radius”傳了一個參數“$radius”，並且給這個參數定義了一個默認值“3px”。如果我們頁面有很多地方的圓角都是“3px”的話，那麼這種默認值的方式就會非常好用。因為在調用的時候，我們只需要調用默認的“混合宏radius”就可以了。