Sass入門ガイド

引数を使ったミックスイン

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ミックスインでは、引数を使って値を上書きしたり、演算したりすることができます。ここでは、引数を使ったミックスインの書き方と、@extendや@functionとの違いについて紹介します。
講師:
06:04

字幕

ミックスインでは引数を使って値を上書きしたり演算したりすることができます。このレッスンでは引数を使ったミックスインの書き方と@extend や @functionとの違いについて紹介します。画面では IDE でSass ファイルと CSSファイルを並べて開いています。IDE の機能を使ってSass ファイルの内容を編集すると自動的に保存、コンパイルが行われリアルタイムにこの右横の CSS ファイルにその出力結果が反映される様に設定しています。Sassファイルではミックスインを使って各クラスセレクタで使う共通のスタイルをまとめてそれをインクルードで各クラスセレクタに読み込んでいます。この様な使い方であれば@extend を使ったスタイルの継承を使った方が最終的に出力される CSS もスマートになります。ミックスインのメリットはこの形に更に引数を加えることができる点です。例えば、この 3 つクラスセレクタでは値は違うものの、それぞれwidth、hightつまり幅と高さを設定しています。この部分もミックスインの引数を使えば共通化ができそうです。試してみましょう。ミックスインで引数を使うにはミックスインの名前の後に括弧で引数の名前を囲みます。 引数の名前は独自の関数@function と作成する時と同じ様に頭にドル記号を付けて名前を入力します。ここでは 2 つの値を受け取るようにしましょう。value という値とvalue2 という値を受け取るミックスインにします。そして、それぞれ受け取った値を1 つ目の値を幅2 つ目の値を高さにそれぞれ設定するようにしてみましょう。ミックスインの中でwidth プロパティに1 つ目の値をhight プロパティに2 つ目の値を設定します。これで引数を使ったミックスインが作成できました。それでは各クラスセレクタでインクルードしている部分に引数を書き加えましょう。既に書かれている@includeボタンベースというミックスインを読み込む部分に括弧を追記しそれぞれ幅と高さの値を引数として渡します。ここでは 400 ピクセルと150 ピクセルです。これにより幅と高さもミックスインで読み込むことができる様になりますのでその下にある記述は削除します。同様にボタンミディアムとボタンスモールについても同じ様に値を設定していきましょう。ボタンミディアムは 200 ピクセルと70 ピクセルボタンスモールは100 ピクセルと35 ピクセルです。 不要になった記述は削除します。CSS が出力されました。結果を見てみると背景色と文字色については共通の値が使われ幅と高さについては個別の値がきちんと入っていることが確認できます。ここでは差が分かり易い様にミックスインの中で固定の値と引数を受け取って動的に設定する値の2 種類を含めていましたが背景色と文字色の様に値が固定の部分については@extendスタイルの継承を使っても良いでしょう。ミックスインの引数ではここに書いた様にカンマ区切りで引数を複数設定したり或いは 1 つだけの引数にしたり冒頭の様に引数を無しにしたりすることができます。また @function独自の関数と同じ様に初期値を設定することもできます。ここでミックスインと他の機能をどの様なケースで使い分ければ良いのかその点について紹介します。このチャートに従っていけば自分のやりたいことと使うべき機能が分かり易くなります。先ず始めに設定したい値に対して引数を使うかどうかつまり処理を動的にするかどうかを判断します。動的にしなくても良い場合は@extendスタイルの継承を使うと良いでしょう。引数を使う場合設定したい値が複数あるかどうかこれを判断します。 設定したい値が 1 つだけの場合は@function 独自の関数を使うと良いでしょう。設定したい値が複数ある場合は今回紹介した @mixinミックスインを使うと良いでしょう。尚、@extend と @mixin では引数を使わない場合書き出される CSS の書式に多少違いがありますので注意してください。このレッスンでは引数を使ったミックスインの書き方と@extend や@function との違いについて学びました。

Sass入門ガイド

SassはCSSを効率的に書くための拡張言語です。Sassにはセレクタの入れ子、変数の利用や条件分岐などCSSだけでは実現できないパワフルな機能が数多く用意されています。これらの機能を使うことでCSSを記述するのに割く時間を大幅に減らすことが可能です。このコースではSassの導入方法からひと通りの機能を使いこなせるところまで順を追って解説します。

3時間41分 (43 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年10月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。