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

4-10 変数の振る舞いをコントロールする !default と !global

!default フラグ

$width: 320px;
$height: 80px;

.boxA {
    $width: 33.3% !default;
    $height: 50%;
    width: $width; //グローバル$widthを参照
    height: $height; //ローカル$heightを参照
}

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

.boxA {
  width: 320px;
  height: 50%;
}

.boxB {
  width: 100vw;
  height: 80px;
}

!global フラグ

$width: 320px;
$height: 80px;

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

.boxB {
    $width: 100vw;
    $height: 50vw;
    width: $width; //ローカル$widthを参照
    height: $height; //ローカル$heightを参照
}

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

.boxA {
  width: 33.3%;
  height: 80px;
}
.boxB {
  width: 100vw;
  height: 50vw;
}
.boxC {
  width: 33.3%;
  height: 80px;
}