SASSのmix-inで要素を引数で渡す

構造が似てるけど要素がちょとずつ違うとか(そういう設計がよくないというのはさておき)、何かしら子要素との連携が必要だけどその要素を特定できないみたいな場合、mixinで要素(名)を引数で渡すことでセレクタを呼び出し元から変えることができます。

// これを一つにしたい
@mixin some-module_patternA {
  color:#333;

  h1 {
    color: #F00;
  }
}

@mixin some-module_patternB {
  color:#333;

  em {
    color: #F00;
  }
}

改善案

@mixin some-module($element:h1) {
  color:#333;

  #{$element} {
    color: #F00;
  }
}

これで要素、あるいは要素名を渡すと子要素などの指定を利用時に渡すことができます。

.hoge {
@include some-module;
}
.foo {
@include some-module(em);
}
// 文字列でセレクターを渡すこともできます
.fuga {
@include some-module('h1 em');
}

まあクラス設計をちゃんとやればあんまりこれを使うべき必然性は発生しないと思いますが。