吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

@if : 条件分岐をする

2014年3月1日 / category : reference-sass, sass

条件分岐ができる@ifの使い方を紹介します。構文は下記の通りです。

@if 条件{
	//処理内容
}

@else if 条件{
	//処理内容
}

@else{
	//処理内容
}

こんな感じの記述になります。

@ifを使用した参考例 – ルートに記述する

Sass
$isStyle: true;

@if $isStyle{

	.style{
		margin: 0;
		padding: 0;
	}

}
CSS – コンパイル後
.style {
	margin: 0;
	padding: 0;
}

@ifを使用した参考例 – @mixinの中で使用する

Sass
$isStyle: true;

@mixin setStyle(){
	@if $isStyle{
		color: #f00;
		font-size: 12px;
		line-height: 18px;
	}
}

.box{
	@include setStyle();
}
CSS – コンパイル後
.box {
	color: #f00;
	font-size: 12px;
	line-height: 18px;
}

@ifを使用した参考例 – @mixinの中で使用する + 引数の値で分岐

Sass
@mixin setFont($type:'m'){
	$color: #000;
	$fontSize: 12;
	@if $type == 's'{
		$color: #f00;
		$fontSize: 10;
	}
	@else if $type == 'l'{
		$color: #0f0;
		$fontSize: 14;
	}
	@else{
		$color: #00f;
	}
	color: $color;
	font-size: $fontSize + px;
}

.fontSmall{
	@include setFont('s');
}

.fontMiddle{
	@include setFont('m');
}

.fontLarge{
	@include setFont('l');
}
CSS – コンパイル後
.fontSmall {
	color: red;
	font-size: 10px;
}

.fontMiddle {
	color: blue;
	font-size: 12px;
}

.fontLarge {
	color: lime;
	font-size: 14px;
}