Sass入門ガイド

独自の関数を作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
独自の関数を作るには、@functionを使います。ここでは、@functionの使い方について紹介します。
講師:
10:50

字幕

独自の関数を作るには@function を使います。このレッスンでは@function の使い方について紹介します。画面では IDE を使ってSass ファイルと CSS ファイルを開いています。画面左側の Sass ファイルを編集するとIDE の機能を使って自動的に保存、コンパイルが行われ画面右側の CSS ファイルに出力される様に設定されています。ここでは簡単な CSS が記述されています。これらの値を独自の関数を使って制御してみましょう。独自の関数を作るには@function というキーワードを使います。実際に記述してみましょう。セレクタの前に@function と入力し半角スペースを開けてその後に作成したい関数の名前を入力します。ここでは get w と入力します。関数名の後は括弧そして波括弧を入力します。この括弧の中にはこの関数に引き渡したい引数というものを設定します。ここでは引数にvalue という名前を付けます。引数の名前には名前の前にドル記号を付けるルールになっています。ここでは value という引数を受け取りたいため$value という様に入力しました。関数は、ある値を受け取ってある値を受け渡す役割を果たしますのでその受け渡すための戻り値というものを作成します。 戻り値は function の中で@returnというキーワードの後に戻り値を入力します。ここでは valueをそのまま返してみましょう。戻り値を指定する時は return の後に返したい値を入力します。この今作成した get w という関数はなんらかの値を受け取りその値をそのまま返すという関数です。これでは関数を使う意味がありませんのでこの値に対して何か加工をしてみましょう。それでは value に対して2 倍の値を返す様にしてみましょう。それでは、この get w という関数を実際に使ってみます。ここでは 1 つ目のwidth プロパティで100 ピクセルを設定していますのでこの 100 ピクセルを2 倍にするために get w 関数を使います。関数を使う時は値の部分にそのまま関数名を入力します。そして括弧を入力し括弧の中に引数として渡したい値を入力します。ここでは 100 ピクセルを入力します。すると get w 関数に100 ピクセルが受け渡されget w 関数の中ではvalue という引数に換算されその valueはget w 関数の中で 2 を掛け算しその値が return によって戻ってくるつまり width プロパティに100 ピクセル x 2200 ピクセルが出力されるという流れになっています。 通常の四則演算と関数の違いとしては関数は 1 度使うと色んな場所で使い回すことができるということです。ここでは 2 番目の hight プロパティにもget w 関数を使ってみましょう。get w 関数を使って20% という値を指定します。出力された CSS を見ると指定した 20% が 2 倍になって40% として出力されているのが確認できます。ここで 1 つ気付く点があります。最初に指定した get w 関数では100 という数値に対してピクセルという単位が指定されていました。2 つ目の get w 関数を呼び出している場所では20 という数値に対してパーセントという単位が指定されています。この単位の扱いは通常の四則演算の時と全く同じルールで計算されます。そのため、この get w 関数の中で計算している値に対して仮にピクセルという単位を付けた場合1 つ目の get w 関数の呼び出している箇所では100 ピクセルとget w 関数の内側で使われている 2 ピクセルで単位が揃っているので計算が可能ですが2 つ目の呼び出しでは20% と 2 ピクセルということで単位が揃わず計算ができずエラーになってしまいます。 そのため関数を使って単位の計算をする時にはどちらかに単位を指定して計算に問題が出ない様に配慮する必要があります。この様に関数の内側では単位を指定しない場合様々な値に関数を流用することができます。1 つ目と 2 つ目ではピクセル、パーセントといった長さやパーセント値に対して計算を行いましたが3 つ目にはカラーの値に対しても計算をしてみましょう。ご覧のようにカラーの値に対しても単位を指定していないため計算が正常に行われて値が出力されています。この様に独自の関数を使うと様々な場所で一定の処理を行うということが簡単にできる様になります。また引数は複数指定することもできます。現在 get w 関数は1 つの引数しか受け取らない様な仕様になっていますが2 つ受け取る様にしてみましょう。引数を複数指定するには引数を受け取る箇所でカンマ区切りで指定します。ここでは 2 番目の引数をvalue2 としましょうそれぞれの引数で引数名は重複しない様にする必要があります。ここでは、この 2 つ目の引数を式の最後に足し算で加算する様に設定してみます。get w 関数の書き換えが完了しました。しかし、この様な形ではget w 関数を使うたびに1 つ目と 2 つ目の引数を必ず指定しなければなりません。 そのため、この value2 という値を毎回ではなくたまに使いたいという時でも全ての get w 関数を使っている箇所で2 つ目の引数を指定しなければなりません。例えば 1 つ目の get w 関数の実行で100 ピクセルをプラスしたい場合2 つ目の呼び出しでも3つ目の呼び出しでも0 という値が必ず必要になってしまいます。これでは便利な関数を使うはずが記述が逆に冗長になってしまうといったこともあります。そのため引数には初期値を設定することができます。初期値を設定するには引数の記述の後ろに記号のコロンを入力しその後に設定したい初期値を入力します。ここでは数字の 0 を入力します。すると、このvalue2という引数はget w 関数が実行された時に引数が指定されていなければ0 を使うことになります。そのため今ここで2 つ目と 3 つ目の呼び出しで指定した 0 を削除しても先ほどの様にエラーが出ず正常に出力される様になります。また値としても1 つ目の呼び出しで100 ピクセルと 100 を指定して100 ピクセル x 2+100その答えが 300 ピクセルと正常に出力されていることが分かります。 また 2 番目と 3 つ目のプロパティでは単純に掛け算が実行されその後の value2 については値を指定していないため初期値の 0 が使われそのまま掛け算として出力されているこういったことが確認できます。この様に引数の初期値や独自の関数を上手く使うこと出なんらかの値を上手く計算し返すといった仕組みを作ることができます。また関数の中ではreturn を使った戻り値の指定の他に計算式を使うこともできます。関数の中で変数を宣言したり計算を行ったりこの様なことが可能です。また計算した値を戻り値に使うこういったことも可能になっています。シンプルな計算では @return の後で戻り値を計算しても構いませんし複雑な計算の場合は、この関数の中で複雑行を使って計算した結果を返すといった形でもどちらでも構いません。最後に独自の関数を作る際の注意点として関数の名前について紹介しておきます。関数の名前は予め Sass に用意されている名前と重複してしまうと正常に動作しません。予め Sass に用意されている関数は公式サイトのご覧の URL で紹介されていますのでチェックしておくと良いでしょう。このレッスンでは独自の関数を作る@function の使い方について学びました。

Sass入門ガイド

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

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

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

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

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