Sassのmixinで引数の順序に依存せず特定の値を変更する

Sassのmixinには複数の引数を持たせることができます。

例えば以下の例では、引数なしで角丸のボックスを、引数に値を順番に指定することで引数の順序通りに値を上書きすることができます。

// scss
@mixin box($width: 10px, $height: 10px, $radius: 3px) {
  width: $width;
  height: $height;
  border-radius: $radius;
}

.foo {
  @include box();
}
.bar {
  @include box(100px, 100px, 50%);
}

/* CSS */
.foo {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.bar {
  width: 100px; /* 変更 */
  height: 100px; /* 変更 */
  border-radius: 50%; /* 変更 */
}

では、角丸の値だけを変えたい場合はどうすればいいんでしょうか？box(10px, 10px, 50%)のようにデフォルト値を渡すしかない？

検索するとMap形式の変数や可変長引数を使う方法がありましたが、ちょっとややこしい。

そこでSassの公式ドキュメントを見ていると以下のような箇所がありました。

Named arguments can be passed in any order, and arguments with default values can be omitted. Since the named arguments are variable names, underscores and dashes can be used interchangeably.

要約すると、

• 「名前付きの引数（$radiusなど）は任意の順序で呼び出すことができる
• $height: 10px;のようにデフォルト値が設定されている引数は省略できる

つまり、以下のように値だけでなく、名前付きの引数ごと指定してあげれば引数の順序に関係なく値を変更することができます。

// scss
.baz {
  @include box($radius: 50%);
}

/* CSS */
.baz {
  width: 10px;
  height: 10px;
  border-radius: 50%; /* 変更 */
}

もしくは、最初の引数と最後の引数だけを変更するということもできます。

// scss
.qux {
  @include box(100px, $radius: 50%);
}

/* CSS */
.qux {
  width: 100px; /* 変更 */
  height: 10px;
  border-radius: 50%; /* 変更 */
}