SCSSのif

概要

SCSSでは通常のCSSとは異なり、if文を使用して条件分岐を行うことができる。

コード例を以下に示す。

@if 条件式 {
	...
}
@else if 条件式 {
	...
}

実際に使用すると以下のようになる。

$color: #000;
 
.btn{
	@if $color == #000 {
		background-color: $color;
	}
	@else{
		background-color: #fff;
	}
}

より効果的に使用する際にはmixinやSCSSのincludeを使用する。

@mixin sample($fontSize: 16px){
	@if $fontSize > 32px{
		font-size: $fontSize;
		color: #000;
	}
	@else{
		font-size: $fontSize;
		color: #fff;
	}
}

演算子

この条件式に入る演算子は以下のとおりである。

比較演算子	意味
A == B	AとBは同じ
A!=B	AとBは異なる
A > B	AはBより大きい
A < B	AはBより小さい
A>=B	AはB以上
A ⇐ B	AはB以下

多言語でいう&&や||などの論理演算子を使用したいなら以下のように記述する。

論理演算子	意味
and	かつ(全ての条件式を満たせばOK)
or	または(一つの条件式を満たせばOK)
not	否定