@mixin box-style { // @mixin 定義名{} の中に共通化したいスタイルを記述
    margin: 2rem 0;
    padding: 2rem;
    color: #333;
}

.box {
    @include box-style; //定義を利用
    background: #f7f7f7
}

.box2{
    @include box-style; //定義を利用
    background-color: #eee;
}

.box {
    margin: 2rem 0;
    padding: 2rem;
    color: #333;
    background: #f7f7f7
}

.box2{
    margin: 2rem 0;
    padding: 2rem;
    color: #333;
    background-color: #eee;
}

@mixin button-style($bg-color, $text-color) {
// @mixin 定義名( $引数名 ){ 定義内容 } と記述して引数（変数）を設定
    background-color: $bg-color; // $bg-colorで背景色を受け取る
    color: $text-color;          // $text-colorで文字色を受け取る
    padding: 10px 20px;
}

.button1 {
    @include button-style(black, white) // 引数に文字色・背景色を与える
}

.button1 {
  background-color: white; // $bg-colorが代入される
  color: black;            // $text-colorが代入される
  padding: 10px 20px;
}

@mixin my-box($color: black, $bg-color: white, $font-size: 16px) {
// @mixin 定義名( $引数名: デフォルト値 ){ 定義内容 } と記述して引数（変数）にデフォルト値を設定
    color: $color;         // $colorで文字色を受け取る
    background: $bg-color;         // $bg-colorで文字色を受け取る
    font-size: $font-size; // $font-sizeで文字サイズを受け取る
}
  
// @mixinの使用
.block1 {
    @include my-box; // 引数が入っていない場合はデフォルトの値が適用される
}
  
.block2 {
    @include my-box( #666, #ccc, 20px); // 引数を指定してカスタマイズする
}
.block3 {
    @include my-box( #333, , 12px ); // 複数引数がある場合、順番に利用される。
}
.block4 {
    @include my-box( $font-size: 24px ); // 変数名を指定すると明示的に引数を与えられる
}

.block1 {
    color: black;      // $colorのデフォルト値が代入される
    background: white; // $bg-colorのデフォルト値が代入される
    font-size: 16px;   // $font-sizeのデフォルト値が代入される
}
  
.block2 {
    color: #666;      // $colorが代入される
    background: #ccc; // $bg-colorが代入される
    font-size: 20px;  // $font-sizeが代入される
}
.block3 {
    color: #666;       // $colorが代入される
    background: white; // $bg-colorのデフォルト値が代入される
    font-size: 20px;   // $font-sizeが代入される
}
.block4 {
    color: black;      // $colorのデフォルト値が代入される
    background: white; // $bg-colorのデフォルト値が代入される
    font-size: 24px;   // $font-sizeが代入される
}

@mixin box-size($size: medium) {
  @if $size == small {
    width: 300px;
  } @else if $size == medium {
    width: 600px;
  } @else if $size == large {
    width: 900px;
  }
}
.btn1{
  @include box-size(small); // 引数にsmallを指定
}
.btn2{
  @include box-size;        // 引数のデフォルト値を利用
}
.btn3{
  @include box-size(large); // 引数にlargeを指定
}

.btn1 {
  width: 300px;
}

.btn2 {
  width: 600px;
}

.btn3 {
  width: 900px;
}