Sassの書き方（if文）

if文を使った条件分岐

Sassは@if、 @else if、@elseを使ってif文の条件分岐を書くことができます。
以下の例では変数$vに入っている値から適用するCSSを切り替えます。

style.scss

// 変数の設定
$v: 2;

@if $v == 1 {

	main {
		margin: 20px 0;
		padding: 20px;
	}
}
@else if $v == 2 {

	main {
		margin-bottom: 80px;
		padding: 40px;
	}
}
@else {

	main {
		padding: 40px;
	}
}

@if、 @else ifは半角スペースを入れてすぐ後ろに条件式を指定します。
また、条件式では(〜)を使うことができるので、JavaScriptのif文のように@if(条件式)のような書き方をすることも可能です。
(〜)を使うと、@ifの直後は半角スペースでなくてもエラーになりません。

style.scss

@if($v1) {
	@debug "true";
}
@else {
	@debug "false";
}

条件式では以下の比較演算子と論理演算子を使うことができます。

@ifの条件式で使うことができる比較演算子

@ifの条件式で使うことができる論理演算子

条件式でtrueになる値、falseになる値

@if、@else ifの条件式はtrueのときに{〜}内の処理を実行しますが、以下の変数の値を条件式で判定すると$v2のfalseと$v9のnull以外は全てtrueの判定になります。

style.scss

// 変数の設定
$v1 : true;
$v2 : false;
$v3 : 1;
$v4 : 0;
$v5 : 2;
$v6 : -1;
$v7 : 'a';
$v8 : 'false';
$v9 : null;

@if $v1 {
	@debug "true"; // Debug: true
}
@else {
	@debug "false";
}

@if $v2 {
	@debug "true";
}
@else {
	@debug "false"; // Debug: false
}

@if $v3 {
	@debug "true"; // Debug: true
}
@else {
	@debug "false";
}

@if $v4 {
	@debug "true"; // Debug: true
}
@else {
	@debug "false";
}

@if $v5 {
	@debug "true"; // Debug: true
}
@else {
	@debug "false";
}

@if $v6 {
	@debug "true"; // Debug: true
}
@else {
	@debug "false";
}

@if $v7 {
	@debug "true"; // Debug: true
}
@else {
	@debug "false";
}

@if $v8 {
	@debug "true"; // Debug: true
}
@else {
	@debug "false";
}

@if $v9 {
	@debug "true";
}
@else {
	@debug "false"; // Debug: false
}

複数の条件式を書く

@if、@else ifの条件式は論理演算子を使うことで複数の条件を組み合わせることができます。
また、条件式では(〜)を使って複数の条件をまとめることもできます。
JavaScriptなど他のプログラミング言語を使ったことがある方にはおなじみの構文です。

style.scss

// 変数の設定
$page_name : 'product';
$param : 1;

@if $page_name == 'main' and $param == 1 {

	@debug "main";

} @else if $page_name == 'main' or ($page_name == 'product' and $param == 1) {

	@debug "product";

} @else {

	@debug "etc";
}

ちなみに、Sassではswitchの構文は用意されていません。
条件分岐を使いたいときは@ifを使う必要があります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。