Sass入門ガイド

関数

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Sassには、値の計算などに使えるような便利な関数があらかじめ用意されています。ここでは、関数の基本的な使い方を紹介します。
講師:
06:37

字幕

Sass には値の計算等に使えるような便利な関数が予め用意されています。このレッスンでは関数の基本的な使い方を紹介します。画面では IDE でSass ファイルと CSS ファイルを並べて表示しています。IDE の機能を使って左側にある Sassファイルの内容を編集すると自動的に保存、コンパイルが行われ右側の CSS ファイルに出力される様に設定しています。現在 CSS には背景色の指定が記述されています。実は関数というのはSass 独自の概念ではありません。一般のプログラミング言語でも使われておりまた CSS でも勿論使われています。例えば CSS では背景色等、色の値を指定する時にRGB 関数という形で色んな値を指定することができます。RGB 関数ではアルファベットで RGB と記述した後に括弧で 3 つの値を括って指定します。この値は 1 つめが Rred、赤2 つめが G、green緑3 つ目が Bblue、青色この、それぞれの値を 256 段階で指定します。この時この RGB から始まり括弧で始まり、括弧で終わる全体をRGB関数そして、この括弧で括られてカンマ区切りで指定された箇所を引数と呼びます。 引数は関数によって指定できる数が決まっています。RBG 関数の場合はR、G、Bそれぞれの値が必要ですので3 つの引数が必要になります。この時 1 つ目の引数を第 1 引数2 つ目の引数を第 2 引数以降、第 3 、第 4 と呼びます。Sass では、この様に CSS の通常の関数以外にも独自の関数が用意されています。ここで 1 つ試してみましょう。カラープロパティ文字色を設定するプロパティで色を指定します。この色を指定する時にある色とある色の中間色を指定するということがミックス関数を使うと可能になります。ミックス関数を使うにはRGB 関数等と同じ様に先ず、mix と入力しその後括弧で括ります。ミックス関数に指定する引数は最大で3つ必須なのは 2 つだけです。3 つ目の引数はあっても無くても構いません。先ず、2 つだけの引数を指定してみましょう。ミックス関数では先ず 1 つ目2 つ目の値は色の値を指定します。形式は 16 進数でもRGB 関数でも構いません。ここでは 16 進数で真っ白な値ffffff を指定します。2 つ目の色の値には000000 で真っ黒を指定します。そうするとこのミックス関数が実行された結果を見ると7f7f7f という値が出力されています。 この値はffffff の真っ白と000000 の真っ黒の全く中間のグレーの値です。この様に 2 つの引数を指定することでミックス関数によってその中間の色の値を抽出することができます。またミックス関数では最大で 3 つの引数が指定できるとご紹介しました。現在は 3 つ目の値を省略しているため1 つ目の値と 2 つ目の値この、それぞれの値の全く中間が抽出されて出力されています。しかし、ここでは3 つ目の引数を指定することで1 つ目の値と 2 つ目の値のどちらに比重を置くかという指定ができる様になります。ここでは 3 つ目の引数に0% を指定してみましょう。すると先ほどまでは全く中間のグレーであった値がblack、つまり000000 の値に変わりました。この 3 つ目の値は weight と呼ばれ1 つ目の引数と 2 つ目の引数どちらにウエイトを置くかという指定ができます。0% から100%の値で指定し0% の場合は 2 つ目の値100% の場合は 2 つ目の値を使います。また、間の値を指定するとどちらかに比重を置いてその比重に従って中間色を抽出しCSS に出力される様になります。例えば、ここでは20% に指定してみましょう。 そうすると、どちらかというと0000 に近い灰色が出力される様になりました。尚、3 つ目の値を省略すると最初に試した様に1 つ目の値と 2 つ目の値の全く中間の色つまり 50% が指定されたという風に解釈されます。この様にミックス関数を使うと2 つの色から新しい別の色を抽出するという様なこれまでの CSS は使えなかった機能が使える様になります。この様な Sass の関数はミックス関数の他にも数多く用意されています。公式サイトのご覧の URL では様々な関数の使い方や引数の意味について解説しています。こちらもチェックしてみると良いでしょう。このレッスンではSass に予め用意されている値の計算等に使える便利な関数の基本的な使い方について学びました。

Sass入門ガイド

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

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

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

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

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