@mixinの使い方

Sassでは@mixinを活用すればするほど効率化がすすみます。
簡単な@mixinの設定方法を説明します。

引数の活用

@mixinは@extendやプレースホルダーと違い引数を持つことができるということを説明しました。
しかし、デザイナーの方はプログラムが苦手で、ともすればコーディングすら苦手なのに引数なんて?まみれです。
私自身もPHPを触るようになるまでは引数ってなんじゃ!という感じでした。(今も若干)
では簡単に@mixinでの引数の使い方を。

@mixin 定義名(引数) {
プロパティ:変数;
}

上記が一般的な@mixinの定義方法になります。

@include 定義名(引数);

@includeは上記のような記述になります。
Javascriptが分かる方なら@mixinがfunction、定義名が関数なんて頭で置き換えれると思います。
順に説明します。

まず、定義名は@include時に呼び出す名前です。半角英数字での記述であればなんでもいいです。
次に括弧内の引数ですが、これが下の変数の値になります。あとで例を出すのでちょっと先にすすみます。
{}の中身が定義内容になります。プロパティはCSSのプロパティで、変数がCSSの値になります。
分かりやすい例が以下になります。

@mixin font-color($value) {
color: $value;
}

引数の場所に変数と同じ値をセットすることで、変数=引数となります。
以下が@include例です。

.font-black {
@include font-color(#000);
font-size: 1.4rem;
}

引数にCSSの値をセットすることで、変数=引数のためプロパティよこの変数に値がセットされるという仕組みです。

ベンダープレフィックスへの対応

先ほどの例などはわざわざ定義せずに普通にCSSを書いた方が確実に早いです。
全然爆速ではないと感じますが、@mixinは特にベンダープレフィックスに非常に有効なのです。やはり公式サイトの言う通りですね。
ベンダープレフィックスとは、CSS3での新機能で、各ブラウザ間で正確に表示させるためのブラウザごとの接頭辞のことです。

以下が主なベンダープレフィックスです。

-moz-(Firefox)
-webkit-(Google Chrome、Safari)
-o-(Opera)
-ms-(Internet Explorer)

では、ベンダープレフィックスを省略する@mixinの簡単な例です。

@mixin flexbox() {
display: -webkit-flex;
display: flex;
}

.layout {
@include flexbox();
}

これからのレイアウトで主流となる値のflexboxですが、ベンダープレフィックス記述が面倒です。
@mixinのflexboxで定義し、@includeするだけでflexboxの内容を展開してくれます。
特に同じCSS内でなんども使う可能性が高いので、2行の記述が1行で済むのでとても便利です。

引数を使ったベンダープレフィックス

先に紹介したflexの定義はプロパティがdisplayで値がベンダープレフィックス+flexなど決まった形式ですが、値がことなる場合は引数で都度設定することで記述量を減らすことができます。

@mixin flexbox2($value) {
-webkit-justify-content: $value;
justify-content: $value;
}

@include flexbox2(space-around);

上記のような記述でflexboxのjustify-contentの値を引数にセットするこで、様々な場所での使いまわしが可能です。

@mixin flexbox2($value:space-around) {
-webkit-justify-content: $value;
justify-content: $value;
}

@include flexbox2();

このようすると、初期値にspace-aroundがセットされます。よく使う値を初期値にし、それ以外の場合は引数で対応するようにするとさらに便利です。

制御構文との組み合わせ

ここからはどちらかというとプログラム的な要素が多くなります。
しかし、JavascriptといいSassといい、フロントエンドエンジニアにもこのくらいの理解は必須で必要なんでしょうね。
ベンダープレフィックスを使うプロパティは結構色々あります。
それごとに@mixinで定義するという方法でもいいのですが、せっかく@mixinは引数がつかえるので有効活用してみましょう。

$prefix: -webkit-, -moz-, -ms-, '';
@mixin css3-use($property, $value) {
@each $array in $prefix {
#{$array}#{$property}: $value;
}
}

.shadow {
@include css3-use(box-shadow, inset 1px 2px 5px -4px rgba(0,0,0,0.4));
}

ちょっと複雑ですが、順に説明します。
1行目の$prefix…で変数prefixに接頭辞をセットしています。最後の”は何もなし(接頭辞なし)ということです。
カンマで区切ることで複数の値を変数にセットすることができます。こういう複数の値のことを『配列』と言います。
2行目はいつも通りの記述です。引数に$propertyと$valueを使うように定義しています。
ここがCSSのプロパティと値になります。
3行目で制御構文の@eachがでてきます。@eachは配列を回すときの制御構文です。指定した変数内の配列を順番に配置していくイメージです。
今回は$arrayに先に定義した$prefixの値をセットしたので、eachで順番に展開していきます。
4行目は二つの変数を1つのCSSプロパティにするために#{}という記述で合体させています。
この#{}をrubyではインターポレーションというようです。
3行目の補足です。eachは配列を回す役割があるので、変数arrayに変数prefixの値をセットし、4行目で順番に値をセットしていく以下のようなイメージです。

-webit-#{$property}: $value;
-moz-#{$property}: $value;
-ms-#{$property}: $value;
#{$property}: $value;

上記のような役目を@eachで実行しています。
最後にincludeするときに引数に$proretyと$valueの値をそれぞれセットすれば自動的にベンダープレフィックスの設定をしてくれます。
少し複雑ですが、覚えてしまうとすごく便利です。

また@mixinは色んなCSSで使えるので、SCSSファイルを分けて管理し、流用するとさらに効率化できます。

コメントを書く