第4章 高度な機能を覚えてSassを使いこなそう4-9 変数の振る舞いをコントロールする !default と !globalSample Code

1
$width: 320px;
2
$height: 80px;
3

4
.boxA {
5
  $width: 33.3% !default;
6
  $height: 50%;
7
  width: $width; //グローバル$widthを参照
8
  height: $height; //ローカル$heightを参照
9
}
10

11
.boxB {
12
  $width: 100vw;
13
  $height: 50vw !default;
14
  width: $width; //ローカル$widthを参照
15
  height: $height; //グローバル$heightを参照
16
}

1
.boxA {
2
  width: 320px;
3
  height: 50%;
4
}
5

6
.boxB {
7
  width: 100vw;
8
  height: 80px;
9
}

1
$width: 320px;
2
$height: 80px;
3

4
.boxA {
5
  $width: 33.3% !global;
6
  width: $width; //上書きされたグローバル$widthを参照
7
  height: $height; //グローバル$heightを参照
8
}
9

10
.boxB {
11
  $width: 100vw;
12
  $height: 50vw;
13
  width: $width; //ローカル$widthを参照
14
  height: $height; //ローカル$heightを参照
15
}
16

17
.boxC {
18
  width: $width; //上書きされたグローバル$widthを参照
19
  height: $height; //グローバル$heightを参照
20
}

1
.boxA {
2
  width: 33.3%;
3
  height: 80px;
4
}
5

6
.boxB {
7
  width: 100vw;
8
  height: 50vw;
9
}
10

11
.boxC {
12
  width: 33.3%;
13
  height: 80px;
14
}