LoginSignup
6

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-04-22

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6