Mixinを使う

Mixinって何に使うやつ？

• 内部にCSSのプロパティ群を持つことができる。
• 共通のCSSを一元管理したい時に便利。

SCSSでかく

SCSS

//mixin設定
@mixin hoge($argmentWidth: 10px) { //引数を渡さない場合は$argmentWidthは10px(デフォルト値)
  width: $argmentWidth;
  .add {
    @content; //mixin使用先でプロパティを記述したい場合に使用
  }
}

//mixinを使う対象
.target1 {
  @include hoge(5px) {
    //@contentに代入
    display: inline-block;
  }
  height: auto;
}

.target2 {
  @include hoge {
    display: inline;
  }
  height: 0;
}

CSSにすると…

CSS

.target1 {
  width: 5px;
  height: auto;
}

.target1 .add {
  display: inline-block;
}

.target2 {
  width: 10px;
  height: 0;
}

.target2 .add {
  display: inline;
}

こんな場所に使う

レスポンシブのメディアクエリに

SCSS

//mixin設定
@mixin sp($breakPoint: 768px) {
  @media screen and (max-width: $breakPoint) {
    @content;
  }
}

//mixinを使う対象
.target {
  max-width: 960px;
  @include sp(560px) {
    max-width: 100%;
  }
}

CSS

.target {
  max-width: 960px;
}

@media screen and (max-width: 560px) {
  .target {
    max-width: 100%;
  }
}

ブレークポイントを弄るのはあまりよくないかも…
引数のところは変数とかで共通化しよう。

最後に

みなさんMixinをどのように使っていますか…？