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

4-8 テストやデバックで使える @debug、@warn、@error

@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

@error でエラーを出力し処理を中断する

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

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