こんにちは、ティロといいます
sassの強力なツールの1つであるミックスインの使い方を分かりやすく解説します
sassをまだ書いたことがない方はこちらの記事をどうぞ
所要時間：30分 ティロこんにちは、ティロといいますsassの超基本的な書き方を紹介します。環境構築がまだの人はこちらの記事をお読みください。15分程度で環境構築ができます。&n[…]
sassの環境構築がまだの人はこちらの記事がおススメです。15分で完了します。
所要時間約15分プログラミング初心者で黒い画面の使い方が分からない、ネットで調べてもうまくできない・・・そんな方向けの記事となります。この方法なら15分足らずで環境構築ができます！ ティロこんに[…]
ミックスインの基本的な使い方
ミックスインとはプロパティの集まりを1つの関数のように格納していつでも使えるようにしたものです。引数を指定することも可能です。
ミックスインは
@mixin ミックスイン名 {プロパティ}
で定義できます。
例を見てください。
1 2 3 4 5 6 7 8 9 10 | //ミックスインを定義する @mixin section { margin-bottom: 16px; border-bottom: #323232 solid 3px; background-color: #fff; } .articleBox { @include section; } |
定義したsectionというミックスインは.articleBoxで使用しています。これをcssに変換すると以下のようになります。
1 2 3 4 5 | .articleBox { margin-bottom: 16px; border-bottom: #323232 solid 3px; background-color: #fff; } |
ミックスインはcssに記述されません。
ミックスインに引数をわたす
例を見てください。
1 2 3 4 5 6 7 8 9 10 11 | //ミックスインを定義する @mixin title($fontSize) { margin-bottom: 16px; text-align: center; padding: 10px; font-size: $fontSize; } .articleBox__title { @include title(25px);//引数をわたす } |
titleというミックスインに$fontSizeという引数を渡しています。.articleBox__titleでは25pxをtitleに渡しています。
cssに変換するとちゃんと.articleBox__titleのfont-sizeが25pxになっています。
1 2 3 4 5 6 | .articleBox__title { margin-bottom: 16px; text-align: center; padding: 10px; font-size: 25px;//指定した値 } |
またmarginやpaddingのような複数の値を指定したい場合は以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 | //ミックスインを定義する @mixin title($fontSize,$value) {//引数を複数指定する margin-bottom: 16px; text-align: center; padding: $value; font-size: $fontSize; } .articleBox__title { @include title(25px,5px 10px);//カンマで区切る } |
font-sizeの25pxとpaddingはカンマで区切ります。titleは引数を2つ指定しています。
このように引数を複数指定することで汎用性が高く、あとから編集しやすいコードになります。
エクステンドには引数を渡す機能がありません。エクステンドについてはこちらの記事に詳しく書きました。
ティロこんにちは、ティロといいますsassのエクステンドの使い方を紹介します まだsassを書いたことがないという方はこちらの記事をどうぞ。所要時間：約30分、ネスト、コメン[…]
引数の初期値を定義する
引数には初期値を定義することが出来ます。定義の仕方は以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 | //ミックスインを定義する @mixin title($fontSize:25px,$value:5px 10px) { margin-bottom: 16px; text-align: center; padding: $value; font-size: $fontSize; } .articleBox__title { @include title; } |
cssでは以下の通りです。
1 2 3 4 5 6 | .articleBox__title { margin-bottom: 16px; text-align: center; padding: 5px 10px; font-size: 25px; } |
初期値を定義したことであとからスタイルを変えたい場合は初期値をいじるだけで済みます。また一方のプロパティには初期値を使用し、別のプロパティには新たに引数を渡すことも可能です。
下の例を見てください。
1 2 3 4 5 6 7 8 9 10 11 | //ミックスインを定義する @mixin title($fontSize:25px,$value:5px 10px) { margin-bottom: 16px; text-align: center; padding: $value; font-size: $fontSize; } .articleBox__title { @include title($value:20px); } |
第2引数の値に20pxをわたしています。
第2引数のみに値を渡すときは「変数名：値」にする必要があります。第1引数を省略して「 title(, 20px);」とするとエラーになります。
ミックスインのスコープ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //エラーになります main { @mixin title($fontSize:25px,$value:5px 10px) { margin-bottom: 16px; text-align: center; padding: $value; font-size: $fontSize; } .main__title { @include title;//スコープ内のため使用できる } } .articleBox__title { @include title($value:20px);//スコープ外のためエラーになります。 } |
@contentでもっと便利に
@contentはプロパティをまとめたミックスインとは少し違います。@contentはネストしたコンテンツをまとめたものです。言葉だと分かりづらいので例を見てください。
1 2 3 4 5 6 7 8 9 10 11 12 | @mixin sumaho($width-sumaho:568px) { @media screen and (max-width: $width-sumaho) { @content; } } .main__title { font-size: 25px; @include sumaho { font-size:16px; } } |
cssに変換後
1 2 3 4 5 6 7 8 | .main__title { font-size: 25px; } @media screen and (max-width: 568px) { .main__title { font-size: 16px; } } |
@contentを使うことでいちいちメディアクエリを書かなくて済みます。このようにネストしたコンテンツを変数のように格納する機能がcontentです。
ミックスインで使えない文字
ミックスインで使えない文字は以下の3つです。
| 例 | |
| 数字から始まる | 0main |
| 記号を含む | main@text |
| ハイフンが連続している | –main |
最後に
今回、「web製作者のためのSassの教科書 webデザインの現場で必須のCSSプリプロセッサ 改訂2版」という本を参考にしました。
ソースコードの例が豊富でかつわかりやすいのでコードを見るだけで使い方が分かりました。sassを勉強した方はこの本がおススメです。
アマゾンのリンクを貼っておきます。