[Sass]@mixinでスタイルを使いまわしてもっと楽しよう

Sass
面倒が大嫌いな下山です。こんに。
面倒なのであいさつも途中までしかしません。人としてどうかとかね。

さて今回は@mixinですよ!
これを使いこなせれば今日からあなたもSassマスター!てかっ!

@mixinの書き方

※mixin名は数字で始まる名前はダメ!

このようにCSSを書くうえで何度も同じスタイルを書くことがあると思います。
そんなときは@mixinで定義して@includeで呼び出してあげれば管理も楽ですねっ!

ボックスhogeとfugaを作るとします。
サイズ(width,height)と枠線(border)は同じなんだけど背景(background)だけ違うんだよね。
そんな時はそれぞれスタイルを書くか、共通部分だけグルーピングして書くかだけどmixinを使って書くと以下の通り。

↓↓↓ コンパイル後 ↓↓↓

他にも同じスタイルを使うところがあればガシガシ使いまわして楽できますねっ!

@mixinの引数

引数を使用すると値にバラつきがあるスタイルでもmixinで使いまわせます!

このように引数を使用して値が違うスタイルを使いまわすことができます。

↓↓↓ コンパイル後 ↓↓↓

この引数は初期値を指定しることができます。

※初期値を定義する引数は定義しない引数のあとに書かなければなりません。
@mixin 任意のmixin名(引数:初期値,引数,・・・)←これはエラーになります。

↓↓↓ コンパイル後 ↓↓↓

include時に値を書かなければ初期値が代入されます。
また複数の引数に初期値を設ける場合、値を省略することはできません。

こうした場合

値を2つでは何がどれの値が分からなくなってしますので

としなければなりません。

まとめ

@mixinは奥が深いです。
最初は欲張らずに引数なしで使ってみるのもいいと思います。十分活躍できいるしねー。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク