!default scss 변수 정의

!default는 기존의 정의된 값이 있다면 기존 값을 그대로 유지하고 없다면 새로운 값을 적용시킬때 사용한다.

 

SCSS

/* 변수선언 */
$color: green;
$font-size: 30px;
$font-size: 20px !default;

.content {
  color: $color;
  font-size: $font-size; //30px 출력
}

원래는 마지막에 선언한 font-size:20px이 적용 되어야 하지만 !default를 같이 선언 했기 때문에 기존에 있던 30px이 적용 된다.

 

만약 기존 변수에 'null' 값이 있었고 !default를 선언한다면 !default를 선언한 변수값이 적용 된다.

/* 변수선언 */
$color: null;
$color: green !default;
$font-size: 30px;
$font-size: 20px !default;

.content {
  color: $color; //green 출력
  font-size: $font-size; //30px 출력
}