Sassで使える便利なMixinの使い方についてまとめてみた

本日はSassで使えるMixinの使い方についてです。

という方は以下の記事をご覧下さい♪

記事の信頼性

現在WEB制作会社のフロントエンドエンジニアをしております。

業務でも日々Sassを使用しておりますので、記事の信頼性の担保になると考えております。

Mixin(ミックスイン)とは

Mixinは、CSSでよく使う値を定義しておき、いつでも取り出せるようにしたものです。

プログラミングで言う変数に感覚が近いかもしれません。

書き方は以下です。

//mixin に続く単語はお好きなもので構いません。ここではredとしています。
＠mixin red｛
//以下にプロパティと値を入れます
color:red；
｝

dlv｛
//定義したMixinを呼び出すには＠includeを使用します
＠include red；
｝

上記のように記載すればmixinを使う事が出来ます。

ここがポイント

ではもう少し発展的な使い方も見ていきましょう。

引数を使ってみよう

mixinでは引数を使うことも出来ます。

引数を使うことでよく値を変えそうなものを引数名として定義しておき、呼び出す側で値を変えることが出来ます。

　＠mixin square($size)｛
　width:$size;
　height:$size;
  background-color:black
｝

.div1｛
＠include square(100px)
｝

.div2｛
＠include square(150px)
｝

ここでは、いろんなサイズの四角形を作るため、mixinに続く名前には「square」という名前を使い、その後()の中に「$size」という変数を入れています。

｛｝の中には横幅を決めるwidthとheight、背景色を決めるbackground-colorを入れ、widthとheightには先程引数に入れた$sizeを入れました。

そして呼び出す側のdivではsquareの引数に100pxを入れています。

これにより縦横100pxの正方形が出来上がるという仕組みです。

div2の方は150pxとしているので150pxの正方形が出来上がります。

つまり、includeに続く引数の値を変える事で色んなサイズの正方形を複数使う事ができるという事ですね。

上記のように引数を使って値を呼び出す側で変える事も出来ます。

初期値の設定

Mixinでは初期値を設定しておくことも出来ます。

書き方は以下です。

＠mixin square($size:50px)｛
　width:$size;
　height:$size;
  background-color:black;
｝

上記のように引数の($size)の横にコロンと値を入れる事で初期値を設定する事ができます。

ここでは初期値を50pxに設定しました。

これにより、以下のように初期値を設定すると初期値を設定した場合と、引数を使った場合とで値を変えることが出来ます。

よく使う値や基本としておきたい値があれば初期値としてあらかじめ設定しておくと良いですね。

＠mixin square($size:50px)｛
　width:$size;
　height:$size;
  background-color:black;
｝

.div1｛
＠include square;
｝

//.div1は50pxの初期値のため正方形が出来上がる。

.div2｛
＠include square(150px);
｝

//.div2には引数を設定しているため150pxの正方形が出来上がる。

初期値を適用したい場合は引数を入れる()ごと削除し、mixin squareというように表記すると初期値が適用されることになります。

そもそもMixinって現場で使うの？

と思われたかもしれませんが、バリバリ使います。笑

フロントエンドの環境であればSassの運用は当然ではありますし、その中で効率良くコードを書けるMixinは重宝する存在です。

なのでもしフロントエンドを目指されている方であれば是非勉強、習得される事をお勧めします。

と言うわけで本日の記事は以上となります。

それではまた次の記事でお会いしましょう。