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

4-9 変数にデフォルト値を割り当てる !default

!default フラグとは

%kadomaru {
	$radius: 5px !default;
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	border-radius: $radius;
}

.item {
	@extend %kadomaru;
}

.item {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

$radius: 10px;

%kadomaru {
	$radius: 5px !default;
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	border-radius: $radius;
}

.item {
	@extend %kadomaru;
}

.item {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

!default を使う場面

%kadomaru {
	$radius: 5px !default;
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	border-radius: $radius;
}

$radius: 10px;

@import "setting";
@import "module";

.item {
	@extend %kadomaru;
}