Sassで「@if文の使い方」と条件分岐は「どういう時に使う」のか？

2020年1月27日

Sassでは条件分岐が使えると聞いたけど、どうやって使うのか知りたい。あと、条件分岐を「どういう時に使うのか？」も解説してほしい

なるほど、Sassの条件分岐はなんとなくイメージできるが、実際に条件分岐を使うイメージがわかない人も多いだろう。

今回はSassで使える「条件分岐」の使い方と、その使い所を具体例を使って、解説していこう！

条件分岐とは

まず最初に「条件分岐ってなんだ？」ていう人に、条件分岐を簡単に解説するぞ。

条件分岐とは

「もし○○だったら」→「Aを表示」
「もしくは□□だったら」→「Bを表示」
「それ以外は」→「Cを表示」

といった形で「指定した条件に当てはまる場合」に「どうするか？」を指定する形式を指し、「条件分岐」を利用すれば、効率よくCSSのコードを書くことができる、便利な機能なのだ。

@if文を使った条件分岐の基本形

Sassで条件分岐を使う時は@ifの後に「条件」を記述し、{}内にスタイルを記述する。

まとめると条件分岐の基本形はこんな形だ。

@if 条件{
  適用したいプロパティ: 値
}

さらに「追加で別の条件を足す場合」は@else ifを、これまでの条件に合わない場合つまり「それ以外の場合」の指定は@else使う。

@if 条件１{
  条件１の場合に適用したいプロパティ: 値;
}@else if 条件２{
  条件２の場合に適用したいプロパティ: 値;
}@else{
  上記以外の場合に適用したいプロパティ: 値;
}

条件分岐の具体例

まずはわかりやすい例を書いてみよう。こちらは汎用的なスタイルを「コンパイルするか、しないか」という書き方となる。

メモ

//汎用スタイルを出力するかどうか？
$useStyle: true;
$marginL:100px;
$marginM:50px;
$marginS:20px;

@if $useStyle{
  .mtL{
    margin-top:$marginL;
  }
  .mtM{
    margin-top:$marginM;
  }
  .mtS{
    margin-top:$marginS;
  }
}

コンパイル後のCSS

.mtL{
 margin-top: 100px;
}
.mtM{
 margin-top: 50px;
}
.mtS{
 margin-top: 20px;
}

$useStyle: true;となっているので、コンパイルすると、CSS@if内のスタイルが出力されてる。

反対に$useStyle: false;とするとコンパイルした時に、@if内のスタイルはCSSが出力されない。

true、falseとは

trueやfalseという表記はプログラミングで頻繁に出てくる単語。「boolean（ブーリアン：真偽値）」と呼ばれて「true=真」「false=偽」という扱いになる。

if文で使う場合「true=真」の場合は条件に合致する事になり、「false=偽」の場合は、条件に合致しない事になる。

条件分岐をミックスインとセットで使う例

条件分岐をミックスインとセットで使う事が多いので、ミックスインとセットで使った例を作ってみた。

例えば、ボックスの横幅に応じて、箱の色を買えるテンプレートを作る場合。

条件分岐を使ったSass

$width: 1200px
@mixin box{
    width: $width;
    border: 1px solid #ccc;
    @if $width > 1000px{
      background-color: #f90;
    }@else{
      background-color: #000;  
    }
    height: 100px;
}
.outer{
      @include box();
}

コンパイル後のCSS

.outer{
  width: 1200px;
  border: 1px solid #ccc;
  background-color: #f90;
  height: 100px;
}

この例の場合、「box」というミックスインの引数に$width: 1200pxが入っている。

条件分岐の部分は@if $width > 1000pxとなっており、ボックスの幅が1000 pxより大きい場合はbackground-color: #f90;それ以外はbackground-color: #000;という指定で、ボックスの色を幅に応じて変えるような指示だ。

条件分岐は「どういう時に使う」のか？

上記の例を見て疑問に思わないだろうか？

「なんでわざわざこんな面倒な記述をするのだろうか？」

そう、基本的に「決まったデザインで自分ひとりで1度だけCSSコーディングをする場合」は、わざわざ「条件分岐」を使ってこんな面倒な指定をする事はあまりない。

つまり条件分岐を使うのは…

条件分岐を使うシーン

「CSSフレームワークなどを作る際」に、あらかじめ「スタイルのバリエーションを用意する」場合など

で使う記述と言えるだ。

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント

学習スタイルが自分に合っているか？
低価格でコスパの良い学習料金か？
講師に質問しやすい環境か？
無料体験できるスクールか？

数あるスクールの中から、実際に受講してわかった事や現役プロならでは目線で厳選・比較したこちらの記事「現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！」を参考に自分に合ったスクールを探そう↓

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実際…

まとめ

Sassの条件分岐は、初心者の方は普段あまり使わない人も多いかもしれない。

しかし自作のフレームワークを作って、作業の効率化を図りたい時などに使えたり、他のフレームワークを読み解く際にも必要な知識なので、記述の仕方や使い方をしっかりと確認しておこう！

Sassの基本をもっと学びたい方は、こちらの記事「Sassを基礎から学ぶ」を参考にしておこう。

やはりWEBの学習は「基礎」が一番重要！「時間をかけてしっかり」と基礎を固める事で、実際の仕事の案件の時に「基礎がしっかりしている」と、そこから応用が効いて、たいていの問題は解決するので、不安にならずに済むのだ。

しかし時間をかけて学ぶのが難しい方や、できるだけ速く習得したい方はプログラミングスクールなどを検討するのもありだろう。私も実際にオンラインプログラミングスクールを利用して、プログラミングを習得したのでその良さを実感している。自分にあったスクールを探したい人は、実際に私が使ったスクールをはじめいくつかおすすめのスクールを比較しているので、こちらの記事を参考になるだろう！

スクールは多少の費用がかかるが、その分早く仕事で稼げて元以上のものを得られるメリットも！一度検討してみるのもありだろう。