#9 - SCSS 변수 - 전역(!global) / 순위

변수 전역 설정

플래그(!global)를 사용하여 변수를 전역으로 설정할 수 있다.

SCSS

.class1 {
  $per100: 100% !global;
  $per50: 50% !global;
  
  width: $per100;
  height: $per50;
}

.class2 {
    width: $per100;
    height: $per50;
}

Compile 된 CSS

.class1 {
  width : 100%;
  height : 50%;
}
.class2 {
  width : 100%;
  height : 50%;
}

 

---

 

변수 적용 우선 순위

변수는 선언 위치와 순서에 따라 적용 우선순위가 다르다.

SCSS

/* 전역 영역에 변수를 선언했을 경우 우선순위 3위 */
$size : 100px;

/* 전역 변수를 설정했을 경우 우선순위 2위 */
.class1 {
  $size : 300px !global;
  width : $size;
}
.class2 {
  width : $size;
}

/* 변수 적용 요소를 기준으로, 가장 마지막에 선언된 값이 우선순위 1위*/
.class3 {
  $size : 800px;
  width : $size;
}

Compile 된 CSS

.class1 {
  width : 300px;
}
.class2 {
  width : 300px;
}
.class3 {
  width : 800px;
}