第4章高度な機能を覚えてSassを使いこなそう

4-6 テストやデバックで使える @debug と @warn

@debugで結果を確認する

@debug 10em + 12em;

test.scss:1 DEBUG: 22em

$value: 500;
@function debugTest(){
	@debug $value;
	$value: $value - 100;
	$value: $value - 100;
	@debug $value;
	$value: $value - 100;
	$value: $value - 100;
	$value: $value - 100;
	@debug $value;
	@return $value + px;
}

.boxA {
	width: debugTest();
}

test.scss:3 DEBUG: 500
test.scss:6 DEBUG: 300
test.scss:10 DEBUG: 0

@warnで警告を表示をする

$value: 1000px;
@function warnTest(){
	@if unitless($value) {
		$value: $value + px;
	}
	@else {
	@warn "#{$value}は駄目！$valueに単位は入れないで！";
	}
	@return $value;
}
.box {
	width: warnTest();
}

WARNING: 1000pxは駄目！$valueに単位は入れないで！
         on line 8 of test.scss