scss @mixin

■@mixin 

いくつかのコードを1つにまとめて、複数箇所で簡単に呼び出すことができる機能
 

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

・使い方
　@include mixin名;

　使用したいSassファイルの中で「@include mixin名」と記載

<div class="main">
  　<div class="one">赤色</div>
  　<div class="two">赤色2</div>
  　<div class="three">黒色</div>
</div>

@mixin redcolor {background-color:red; }

.main {
  margin: 20px 10px;
  color: #ffffff;  
  .one {
      @include redcolor;
  }
  .two {
      @include redcolor;
     }}

<div class="main">
  　<div class="one">赤色</div>
  　<div class="two">赤色2</div>
 　 <div class="three">黒色</div>
</div>