@contentを使って、@mixinにスタイルセットを渡す

@mixin（ミックスイン）おさらい

**Mixin（ミックスイン）**は関数に近く、
CSSスニペットに名前を付けていつでもどこでも呼び出せるというイメージ。

mixの呼び出しは@include で呼び出す。

app.css

/*
ミックスイン
よく使うものをスニペットとして保存しておこう
*/

/* 
ミックスインの作り方
頭に@mixinを付ける

@mixin 名前($変数1,$変数2,...){

    プロパティ1:$変数1;
    プロパティ2:$変数2;
    プロパティ3:$変数1 $変数2 ...;
}
*/

/*
ミックスインの使い方 
頭に@includeを付ける

@include 名前(値1,値2,...);
*/

（例）

@mixin btn() {
  display: block;
  padding: 20px 30px;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  background-color: #20aee5;
  text: {
    decoration: none;
    align: center;
  }
}

.footer__sns__btn {
  @include btn(); // 『@include class名()』で呼び出し
}

@content の使い方

・ @mixinの中で@content;と記述するとコンテントブロックを渡すことができる
・ これにより1つのmixinで呼び出し側に合わせた処理が可能

例えば、mixin,scssというscssファイルに
スマートフォンでのレスポンシブを@mixin似て呼び出せるようにしておきます。

mixin.scss

@mixin sp {
  @media screen and (max-width: 767px) {
    @content;
  }
}

例.scss

.p-top-training {
  margin: 60px auto;
  padding-bottom: 98px;
  position: reltive;
  @include sp {
    margin-top: .8rem;
    padding: 0 .2rem .6rem 0;
  }
&-content {
    background: url(/xxx/xxx.jpg) no-repeat center/cover;
    width: 1120px;
    height: 600px;
    padding: 100px 100px 155px 420px;
    @include sp {
      background: url(/xxx/xxx.jpg) no-repeat center/content;
      height: 5rem;
      padding: .6rem .4rem .8rem;
      width: 355px;
    }
  }
  &-background {
    background: url(/xxx/xxx.png) no-repeat center/contain;
    width: 1276px;
    height: 240px;
    position: absolute;
    right: 0;
    bottom: -29px;
    z-index: -5;
  }
  &-title {
    font-size: 60px;
    letter-spacing: 6px;
    color: #fff;
    text-align: center;
    @include sp {
      font-size: .4rem;
      letter-spacing: .04rem;
    }
  }

こうすることによって各クラスに対して記述した
@include sp {}の部分が@contentの部分に挿入されて行きます。
レスポンシブ対応などは、下にまとめて記述するより、タブレットごとの相違が一目瞭然になるのでわかりやすくなります。