[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%;
}

results matching ""

    No results matching ""