[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 43회차 미션

변수 유효 범위 (Variable Scope)

변수는 사용 가능한 유효범위가 있다.

선언된 블록( {} ) 내에서만 유효한 범위를 가진다.

변수 $color는 .box1 의 블록안에서 설정 되었기 때문에 블록밖의 .box2 에서는 사용할 수 없다.

.box1{
    $color: #111;
    background: $color;
}

//Error
.box2{
    background: $color;
}

box1을 벗어나면서 부터는 유효하지 않은 범위가 되는 것이다. 그렇기 때문에 .box2에서는 에러가 발생한다.

변수 재 할당 (Variable Reassignment)

변수를 만들고 만든 변수를 특정한 다른 변수에 다시 넣어주는 방식을 말한다.

SCSS:

$red: #FF0000;
$blue: #0000FF;

$color-primary: $blue;
$color-danger: $red;

.box{
    color: $color-primary;
    background: $color-danger;
}

red와 blue 변수에 특정한 색상 값을 넣었다.

그리고 color-primary와 color-danger에 다시 할당을 했다. 그러면 blue가 가진색상이 primary에 들어가고 red의 값이 danger에 들어가게 된다.

그래서 다른 변수의 값을 받은 새로운 변수들을 .box에서 사용하고 있다.

변수라는 것은 변수에 특정 값을 넣어 할당하지만, 다른 변수에 또 다른 변수를 할당해서 값을 정의할 수도 있다.

컴파일된 CSS

.box {
  color: #0000FF;
  background: #FF0000;
}

변수의 전역 설정

!global (전역설정)

!global이라는 플래그를 사용하면 변수의 유효범위를 전역(Global)로 설정할 수 있다.

SCSS:

.box1{
    $color: #111 !global;
    background: $color;
}
.box2{
    background: $color;
}

Compiled to:

.box1 {
  background: #111;
}

.box2 {
  background: #111;
}

$color 라는 변수를 선언해서 특정한 값을 넣고 !global플래그를 사용했다. 이 플래그를 사용하지 않았을 때는.

.box1 에서만 사용가능하고 밖의 범위에서는 사용할 수 없는 변수였지만 !global이라는 플래그가 붙어있기 때문에 위와 같이 box1의 밖의 영역인 .box2 에서도 $color 변수를 사용할 수 있는 결과를 볼 수 있다.

추가적으로 주의해서 봐야할 부분은 다음과 같다.

$color: #000;
.box1{
    $color: #111 !global;
    background: $color;
}
.box2{
    background: $color;
}
.box3{
    $color: #222;
    background: $color;
}

$color 를 처음에 정의를 했다.

box1 번에서 #111로 재 정의하면서 global 플래그를 붙였다. 하지만 $color는 전역에 해당하는 범위에 정의가 되었지만 !global에 의해 대체되었다. 따라서 box2에는 #111이 할당되게 되고, box3에서는 $color를 #222로 재정의됨에 따라 $color의 값이 #222가된다.

그래서 변수가 적용되는 곳을 기준으로 가장 가까운곳에서 마지막에 선언된 값이 들어가게 된다.

.box1 {
  background: #111;
}

.box2 {
  background: #111;
}

.box3 {
  background: #222;
}

!default (초깃값 설정)

!default 플래그는 할당되지 않은 변수의 초깃값을 설정한다.

즉, 할당되어있는 변수가 있다면 변수가 기존 할당 값을 사용한다.

SCSS:

$color-primary: red;

.box {
  $color-primary: blue !default;
  background: $color-primary;
}

Comiled to:

.box {
  background: red;
}

예제를 보면 .box에서 $color-primary 를 blue로 정의했다. 만약 !default가 없었다면 red가 blue로 덮어 씌워지고 background에서 blue값이 나왔을 것이다. 하지만 이번에는 !default라는 플래그를 사용했기때문에 red라는 결과가 나왔는데. 어떤 개념이냐면 코드가 복잡할 때 color-primary 의 값을 찾지 못할 때 default 되는 값을 적용하겠다는 의미가 된다.

변수와 값을 설정하려고 하는데 혹시 기존의 변수가 있을 수 있으니, 현재 설정하는 변수의 값은 사용하지 않겠다는 의미로 쓸 수 있다. 예를 들어 Bootstrap을 같은 외부 Sass 라이브러리를 연결했더니 변수 이름이 같아 내가 작성한 코드의 변수들이 덮어쓰기 된다면 문제가 있겠다. 반대로 내가만든 Sass 라이브러리가 다른 사용자 코드의 변수들을 overwrite 한다면 사용자들은 그 라이브러리를 더이상 사용하지 않을 것이다. 이럴 때 Sass라이브러리 에서 사용하는 변수에 !default 플래그를 사용하면 기존코드를 Overwrite하지 않고도 사용할 수 있다.

 

 

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스