scss 引数

■引数（ひきすう）
scss特有ではなくプログラミング全般でよく使われ、追加情報のような役割

scssで@mixin＆＠includeで使う場合、＠includeごとに値を指定できる

「$change」などの変数を記述することもできる。変数の変更をするだけで、mixinで利用される値も引数を通して変更される。

変数　復習 

・定義　$変数名: 値;
　例）変数名（change）に赤色（red）を代入

<div class="title">タイトル</div>

<div class="title2">タイトル2</div>

$change:red;

  .title { color:$change; }
  .title2 { color:$change; }

@mixin　復習 

・定義　@mixin mixin名 { コード }

・使い方　使用したいSassファイルの中で

@include mixin名;と記載

■引数未使用

@mixin font-date{

background-color:black;

 font-size:14px;

}
@mixin fontdate{color:black;}で黒色・14pxを指定

h1{

@include font-data;

background-color:red;
}

@mixin fontdateで14pxはそのまま使用。色だけ赤色に変更

そのために

■引数使用

@mixin font-date($color){

　font-size:14px;
   color:$color;
}
@mixin fontdateで($color)を指定

h1{
@include font-date(red);
}

fontdate($color)で指定されていた色をredで指定。

この時点で($color＝redと設定される)

<div class="main">
     <div class="red">赤</div>
     <div class="blue">青</div>
     <div class="green">緑</div>
</div>

@mixin title($color) {
  display: inline-block;
    text-align: center;
  background-color: $color;

　引数$colorを用いて色を変更できるようにする
}

.main {
  margin: 20px 10px;
  
  .red {
     @include title(red);

　引数に「red」を指定.色以外はcircleの条件が適用
    width: 34px;
    height: 34px;
  }
  
  .blue {
    @include title(blue);

　引数に「blue」を指定.色以外はcircleの条件が適用
    width: 62px;
    height: 62px;
  }
  
  .green {
   @include title(green);

    引数に「green」を指定.色以外はcircleの条件が適用
    width: 90px;
    height: 90px;
  }
}