Sassの@mixinの基本について解説してみた

mixinとは

通常であれば、一つ一つ細かく分けて書いていかなければならないものを、まとめて記述することができます。

通常の書き方との比較

qiita.scss

//通常
.contact {
 background-color: blue;
 color: fff;
 height: 50px
 width: 200px
}

.share {
 background-color: blue;
 color: fff;
 height: 50px
 width: 200px
}

//mixinを使用
@mixin style {
 background-color: blue;
 color: fff;
 height: 50px
 width: 200px
}

.contact {
 @include style
}

.share {
 @include style
}

このように記述することで、通常のcssと全く同じ記述をすることが可能です。

最後に

mixinを使い、一つにまとめて記述することで、より可読性の高いコードを書くことができます。また、後からやっぱり背景色を赤にしたいとなったときにも、mixinの値のみを変更すればincludeで呼び出した他のコードにも影響を与えることができるのでとても便利ですね。
今回紹介したのはmixinのほんの一部の機能で、他にも引数をもたせることができたりと、できることは沢山あるので、この記事をきっかけにmixinを使ってみようと思って頂けたら幸いです。今回の記事は以上になります。最後まで読んでいただき、ありがとうございました！