Sass入門ガイド

@if コントロールディレクディブ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
条件によって分岐する処理を行うときは、コントロールディレクティブを使います。ここでは、その内の1つである、@ifディレクティブを使った条件分岐の方法について紹介します。
講師:
09:57

字幕

条件によって分岐する処理を行う時はコントロールディレクディブを使います。このレッスンは、そのうちの 1 つである@if ディレクディブを使った条件分岐の方法について紹介します。画面では IDE で左側に Sass ファイル右側に CSS ファイルを開いています。IDE の機能を使ってSass ファイルを編集したらその内容が自動的に保存、コンパイルされリアルタイムに画面右側の CSS に反映される様に設定しています。Sass ファイルを見ると2 つの変数と1 つのルールセットが定義されています。ここでは、この 2 つの変数を元に@if ディレクディブを使ってif 文、つまり条件分岐を実装してみましょう。if 文を使うには記号のアットマークの後にアルファベットで if と入力し半角スペースを入力します。この後に条件文を入力します。ここでは変数を宣言しているスキンネームこのスキンネームの名前で条件分岐をしてみたいと思います。このため先ずskinName という変数名を記入しこのスキンネームがスキン 1 という値だったらという条件文を書いてみましょう。「値が合致する」という表現を行うには記号のイコールを 2 つ続けて記入します。 そして、その値が何かここでは skin1 という文字列ですのでダブルクオテーションでskin1 という文字列を括りその後に波括弧で括ります。このスキンネームから始まる一連の流れが条件文になります。ここでは skinName という変数がskin1 という文字列の値を持っているという条件文に適合したものがこの波括弧の中です。それでは、この波括弧の中でプロパティを宣言してみましょう。バックグランドカラープロパティを使って色を設定します。ここでは冒頭に宣言しているスキンネームの変数の中身はskin2 という値ですのでこの条件文が処理されても出力された CSS には何も追加されていません。それでは引き続き if 文を書いていきます。この skin1 に適合しなかった場合の条件式はそのまま続けて書くことができます。続けて書く場合はif ではなくels if という表記を使います。同じく記号アットマークの後にels if です。そして、ここは同じ様に条件式を書いていきます。今度はスキンネームがskin2 だった場合skin2 に合致していた場合という条件式を書きますこの中でバックグランドカラーを先ほどとは違う色に指定してみましょう。 先ほどは CSS に何も出力されませんでしたが今度はこの条件式に適合していますのでこの中に書いてあるバックグランドカラープロパティの指定がCSS に出力されました。ここまでは skin1 かskin2 という文字列がスキンネームに適合した場合の条件式です。「これ以外の場合」という条件を書くためには@els という条件になります。@els はその前で指定された条件文以外の条件ということになりますのでここでは skin1或いは skin2 以外の値が指定されていた場合はこの波括弧の中が適合されます。ここでも念のためバックグランドカラーを指定しておきましょう。この様に @if ディレクディブを使って条件式を記述しその条件に適合したプロパティを設定するという様な使い方ができます。条件式は現在セレクタの内側で使っていますが外側でも使うことができますし或いはミックスインの中やファンクションの中で使うこともできます。それでは引き続き2 つの条件を同時に比較するというやり方を書いてみたいと思います。新規の if 文で@ifそして条件文には先ほどと同様にskinName がskin2 だったらという条件を指定します。 更にここで平行して、もう 1 つの条件文を記述したい場合論理演算子というキーワードを使います。論理演算子とはある条件と、ある条件を並べて使う時のキーワードです。ここでは 「2 つ共の条件が適合する場合」という if 文を作りたいのでand と入力します。and を使うとこの左右にある条件式が両方とも適合した場合に波括弧の中が有効になるという条件式になります。ここでは 2 つ目の条件式にis legacy という冒頭で宣言している変数を使ってtrue かどうかという条件式を書きます。こうすることで変数 skinName がskin2 である且つ変数 is legacy がtrue である場合にこの波括弧の中が適用されます。ここではマージンプロパティで0 を指定しておきましょう。CSS を見るとこの条件式に適合していますのでマージン 0 が出力されています。念のためここでも @els を使って他の条件式に適合する場合は別の値が出力される様にしておきましょう。尚、ここの条件式で使っているイコール 2 つの記号を比較演算子と呼びます。ここでは「比較演算子の左側と右側が同じだったら」という比較演算子を紹介しました。 この他にも比較演算子は幾つかの種類があります。リストを見てみましょう。先ず 1 つ目は条件式の左側 a と条件式の右側 b が等しくないという演算子です。この演算子は記号のエクスクラメーションマークと= を間を空けず続けて記入します。次に a は b 以上という比較演算子です。この演算子は左右の値が数値等の場合a が b よりも大きいa が b 以上であるという場合に適合します。演算子の書き方は大なりイコールを続けて書きます。その反対にa は b 以下という比較演算子もあります。この場合演算子は小なり、イコールです。更に a は b より大きい或いは a は b 未満といった大なり、小なりだけを使う比較演算子もあります。また先ほど紹介したand の様に2 つの条件式を平行して使う場合に使う論理演算子にも他のキーワードがあります。1 つ目はor またはという論理演算子です。この or キーワードを使うと「左右の条件式のどちらかが当てはまっていた場合に条件を適用する」という論理演算子になります。また not、否定という論理演算子もあります。こちらは and や or と違って条件式の前に付けることでその条件式が違ったらという論理演算子になります尚、これらの論理演算子は複数同時に使うこともできます。 ここでご紹介した@if ディレクディブの他にもコントロールディレクディブには様々なディレクディブが存在しています。例えば for、繰り返しwhile、特定の条件を満たしている限り繰り返し。each、データ型がリストの値に対して繰り返し、等です。尚、if を含むコントロールディレクディブ全般は大変高度な機能であり通常のスタイリングでは推奨されていません。例えばコンパスの様なCSS ライブラリや複数なミックスインの内部で使うことを想定されています。このレッスンでは条件によって分岐する処理を行うコントロールディレクディブのうち@if ディレクディブの使い方について学びました。

Sass入門ガイド

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

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

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

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

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