[Sass]混合宏的參數--傳一個帶值的參數

在Sass的混合宏中，還可以給混合宏的參數傳一個默認值，例如：

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

在混合宏“border-radius”傳了一個參數“$radius”，而且給這個參數賦予了一個默認值“3px”。

在調用類似這樣的混合宏時，會多有一個機會，假設你的頁面中的圓角很多地方都是“3px”的圓角，那麼這個時候只需要調用默認的混合宏“border-radius”:

.btn {
  @include border-radius;
}

編譯出來的CSS:

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

但有的時候，頁面中有些元素的圓角值不一樣，那麼可以隨機給混合宏傳值，如：

.box {
  @include border-radius(50%);
}

編譯出來的CSS:

.box {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}