面倒が大嫌いな下山です。こんに。
面倒なのであいさつも途中までしかしません。人としてどうかとかね。
さて今回は@mixinですよ！
これを使いこなせれば今日からあなたもSassマスター！てかっ！
@mixinの書き方
@mixin 任意のmixin名 {
任意のスタイル
任意のスタイル
任意のスタイル
・
・
・
}
/*呼び出し方*/
.hoge {
@include mixin名;
}※mixin名は数字で始まる名前はダメ！
このようにCSSを書くうえで何度も同じスタイルを書くことがあると思います。
そんなときは@mixinで定義して@includeで呼び出してあげれば管理も楽ですねっ！
例
ボックスhogeとfugaを作るとします。
サイズ(width,height)と枠線(border)は同じなんだけど背景(background)だけ違うんだよね。
そんな時はそれぞれスタイルを書くか、共通部分だけグルーピングして書くかだけどmixinを使って書くと以下の通り。
@mixin aru-style {
width: 150px;
height: 150px;
border: 1px solid #ccc;
}
.hoge {
@include aru-style;
background: #eee;
}
.fuga {
@include aru-style;
background: #c00;
}↓↓↓ コンパイル後 ↓↓↓
.hoge {
width: 150px;
height: 150px;
border: 1px solid #ccc;
background: #eee;
}
.fuga {
width: 150px;
height: 150px;
border: 1px solid #ccc;
background: #c00;
}他にも同じスタイルを使うところがあればガシガシ使いまわして楽できますねっ！
@mixinの引数
引数を使用すると値にバラつきがあるスタイルでもmixinで使いまわせます！
@mixin 任意のmixin名(引数,引数,引数,・・・) {
任意のプロパティ:引数;
任意のプロパティ:引数;
任意のプロパティ:引数;
・
・
・
}このように引数を使用して値が違うスタイルを使いまわすことができます。
例
@mixin aru-style($my-width, $my-color) {
width: $my-width;
height: 150px;
color: $my-color;
}
.hoge {
@include aru-style(150px, #c00);
background: #eee;
}↓↓↓ コンパイル後 ↓↓↓
.hoge {
width: 150px;
height: 150px;
color: #c00;
background: #eee;
}
この引数は初期値を指定しることができます。
@mixin 任意のmixin名(引数:初期値) {
任意のプロパティ:引数;
}※初期値を定義する引数は定義しない引数のあとに書かなければなりません。
@mixin 任意のmixin名(引数:初期値,引数,・・・)←これはエラーになります。
例
@mixin aru-style($my-color, $my-width:150px) {
width: $my-width;
height: 150px;
color: $my-color;
}
.hoge {
@include aru-style(#c00, 200px);
}
.fuga {
@include aru-style(#c00)
}
↓↓↓ コンパイル後 ↓↓↓
.hoge {
width: 200px;
height: 150px;
color: #c00;
}
.fuga {
width: 150px;
height: 150px;
color: #c00;
}
include時に値を書かなければ初期値が代入されます。
また複数の引数に初期値を設ける場合、値を省略することはできません。
@mixin aru-style($my-color, $my-width:150px, $my-height:150px)
こうした場合
@include aru-style(#c00, 300px);
値を２つでは何がどれの値が分からなくなってしますので
@include aru-style(#c00, 300px, 200px);
としなければなりません。
まとめ
@mixinは奥が深いです。
最初は欲張らずに引数なしで使ってみるのもいいと思います。十分活躍できいるしねー。
