stylusのmixinでプレースホルダーセレクタを使った場合のようにCSSを出力する

mixinの中で+cacheという関数を使うと、プレースホルダーセレクタを使った場合のようにCSSを出力してくれるっぽい

普通にmixin

hoge.styl

mixin()
  margin-left 10%
  margin-right 10%

.hoge
  mixin()
  background #ccc

.fuga
  mixin()
  background #eee
  border solid 1px #333

出力結果（重複した記述を纏めてくれない）

hoge.css

.hoge {
  margin-left: 10%;
  margin-right: 10%;
  background: #ccc;
}

.fuga {
  margin-left: 10%;
  margin-right: 10%;
  background: #eee;
  border: solid 1px #333;
}

プレースホルダーセレクタでextend

hoge.styl

$placeholder
  margin-left 10%
  margin-right 10%

.hoge
  @extend $placeholder
  background #ccc

.fuga
  @extend $placeholder
  background #eee
  border solid 1px #333

出力結果（重複した記述を纏めてくれる）

hoge.css

.hoge,
.fuga {
  margin-left: 10%;
  margin-right: 10%;
}

.hoge {
  background: #ccc;
}

.fuga {
  background: #eee;
  border: solid 1px #333;
}

mixinの中で+cache関数を使う

hoge.styl

mixin()
  +cache()
    margin-left 10%
    margin-right 10%

.hoge
  mixin()
  background #ccc

.fuga
  mixin()
  background #eee
  border solid 1px #333

出力結果（重複した記述を纏めてくれる）

hoge.css

.hoge {
  background: #ccc;
}

.hoge,
.fuga {
  margin-left: 10%;
  margin-right: 10%;
}

.fuga {
  background: #eee;
  border: solid 1px #333;
}