Sass入門ガイド

色の演算

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
特殊な演算として、色の演算を行うことができます。ここでは、色の演算を使って色の値を算出する方法を紹介します。
講師:
03:53

字幕

特殊な演算として色の演算を行うことができます。このレッスンでは色の演算を使って色の値を算出する方法を紹介します。画面では IDE でSass ファイルと CSS ファイルを並べて表示しています。左側の Sass ファイルの内容は編集を行うと自動的に保存コンパイルが行われ画面右側のCSS ファイルに反映される様に設定しています。それでは色の演算を行ってみましょう。先ず 16 進数と16 進数の色の値を足し算してみます。既に 01、02、03 という色の値がありますのでこれに新しい色の値を足し算してみましょう。ここでは 112403という値を入力します。Sass ファイルがコンパイルされCSS ファイルに新しい値が出力されました。16 進数の足し算ではそれぞれの桁に対して計算が行われここでいうと足し算が行われ新しい結果が出力されます。同様に RGBA 関数同士の足し算も可能です。ここでは 100、0、0、0.2 というRGBA 関数が呼び出されていますのでこれに新しい RGBA 関数を足し算してみましょう。尚、RGBA 関数同士の計算ではこの最後のアルファの値は同じ値を指定しなければ計算できないので注意してください。 それでは新しい値を追加しましょう。RGBA 関数で値を指定していきます。これは 155100255そしてアルファは同じ値として0.2 を指定します。計算結果が出力されました。RGBA 関数や或いは RGB 関数HSLA 関数等でも各桁に対して足し算が行われます。ここでは先ず R の桁100+155 が行われR のところには 255 が代入されています。次に G の桁では 0 + 100B の桁では 0 + 250 をという計算がそれぞれ行われています。また色の計算は足し算以外にも引き算や割り算掛け算も行うことができます。例えば、この 01、02、03という 16 進数の値に対して2 を掛けてみるとそのまま値が 2 倍された結果がCSS に出力されます。但し足し算以外の引き算、掛け算、割り算の出力結果は Sass ファイルに書いた計算式からはなかなか想像がしにくいということも現実的には考えられます。そのため色の演算では基本的にはこの足し算を使うことが多くなるでしょう。Sass では、この他でも色自体の明度を変更したり彩度を変更したりといったことが別に用意されている関数によって行うこともできます。 このレッスンでは色の演算を使って色の値を算出する方法について学びました。

Sass入門ガイド

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

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

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

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

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