可選引數

SASS 的可選引數只允許你在指定其值時使用引數; 否則,它將被忽略。我們舉一個以下 mixin 的例子:

@mixin galerie-thumbnail ($img-height:14em, $img-width: null) {
    width: $img-width;
    height: $img-height;
    outline: 1px solid lightgray;
    outline-offset: 5px;
}

所以呼叫

.default { 
  @include galerie-thumbnail; 
}
.with-width { 
  @include galerie-thumbnail($img-width: 12em);
}
.without-height { 
  @include galerie-thumbnail($img-height: null);
}

將只在 CSS 檔案中輸出以下內容:

.default {
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.with-width {
  width: 12em;
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.without-height {
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

SASS 不輸出 null 作為其值的屬性,這在我們需要在呼叫中包含可選引數時非常有用。