第4章 高度な機能を覚えてSassを使いこなそう4-8 テストやデバックで使える@debug、@warn、@errorSample Code

1
@debug 10em + 12em;

1
$value: 500;
2
@function debugTest(){
3
  @debug $value;
4
  $value: $value - 100;
5
  $value: $value - 100;
6
  @debug $value;
7
  $value: $value - 100;
8
  $value: $value - 100;
9
  $value: $value - 100;
10
  @debug $value;
11
  @return $value + px;
12
}
13

14
.boxA {
15
  width: debugTest();
16
}

1
@use 'sass:math';
2

3
$value: 1000px;
4

5
@function warnTest(){
6
  @if math.is-unitless($value) {
7
    $value: $value + px;
8
  }
9
  @else {
10
    @warn "#{$value}は駄目！$valueに単位は入れないで！";
11
  }
12
  @return $value;
13
}
14

15
.box {
16
  width: warnTest();
17
}

1
@use 'sass:math';
2

3
$value: 1000px;
4

5
@function errorTest(){
6
  @if math.is-unitless($value) {
7
    $value: $value + px;
8
  }
9
  @else {
10
    @error "#{$value}は駄目！$valueに単位は入れないで！";
11
  }
12
  @return $value;
13
}
14

15
.box {
16
  width: errorTest();
17
}