SASS의 `!global` 플래그

이 글은 SASS의 !global 플래그에 대해 설명합니다.

!global 플래그의 자세한 메커니즘, 사용 예시, 주의사항에 대해 설명하겠습니다.

YouTube Video

SASS의 !global 플래그

SASS에서 !global 플래그는 변수의 스코프를 조작할 때 사용됩니다. 이 플래그를 올바르게 이해하고 적절히 사용하면 코드의 예기치 않은 동작을 방지하고 유지보수성을 높일 수 있습니다.

!global 플래그란?

일반적으로 SASS 변수에는 스코프(범위)가 있습니다. 기본적으로 변수는 정의된 범위 내에서만 유효합니다. 즉, 변수는 함수나 믹스인 내부에서 정의된 경우 그 밖에서는 접근할 수 없습니다.

하지만 !global 플래그를 사용하면 변수를 전역 스코프에 직접 할당할 수 있습니다. 이렇게 하면 변수 값을 다양한 스코프에서 공유할 수 있습니다.

!global 플래그 없이

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue; // Local variable (does not overwrite the global variable)
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // red
10}

• 이 코드에서는 $color가 전역 스코프에 정의되어 있기 때문에, .change의 color 속성은 red로 유지됩니다.

출력된 CSS

1.change {
2    color: red;
3}

!global 플래그 사용 시

같은 예제에 !global 플래그를 추가해봅시다.

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue !global; // Overwrite the global variable
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // blue
10}

• 이 경우, !global 플래그가 지정되어 있어서 $color의 값이 전역 스코프에서 갱신됩니다. 결과적으로 .change의 color 속성 값이 blue로 변경됩니다.

출력된 CSS

1.change {
2    color: blue;
3}

사용시 주의사항

• 전역 스코프 오염 !global 플래그의 과도한 사용은 예기치 않은 스코프 충돌이나 전역 스코프 오염을 초래할 수 있습니다. 이것은 특히 대규모 프로젝트에서 중요하며, 이 플래그의 과도한 사용은 피해야 합니다.

• 의도하지 않은 값 덮어쓰기 !global 플래그를 사용할 때 같은 이름의 변수가 다른 곳에서 의도치 않게 덮어써질 수 있습니다. 따라서 변수의 이름을 일관되고 명확하게 지정하는 것이 필요합니다.

실제 예시

다음은 !global 플래그를 올바르게 사용하는 예시입니다.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4@mixin set-theme($primary, $secondary) {
 5    $primary-color: $primary !global;
 6    $secondary-color: $secondary !global;
 7}
 8
 9.light-theme {
10    @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14    @include set-theme(#333333, #666666);
15}
16
17body {
18    background-color: $primary-color;
19    color: $secondary-color;
20}

• 이 코드에서는 set-theme 믹스를 이용해 동적으로 테마를 전환할 수 있습니다. 글로벌 변수가 테마마다 갱신되므로 여러 개의 테마를 유연하게 관리할 수 있습니다.

출력된 CSS

1body {
2    background-color: #333333;
3    color: #666666;
4}

자주 발생하는 실수와 대책

플래그를 잊음

!global을 추가하지 않으면 변수가 원하는 범위에서 업데이트되지 않을 수 있습니다. 필요할 때는 반드시 명시적으로 플래그를 추가하세요.

1@mixin update-color() {
2    $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6    $color: green !global; // Overwrite the global variable
7}

글로벌 스코프에 대한 과도한 의존

!global 플래그에 지나치게 의존하면 코드의 디버깅과 유지보수가 어려워질 수 있습니다. 사용은 최소한으로 줄여야 합니다.

요약

SASS의 !global 플래그는 특정 상황에서 매우 유용하지만, 주의해서 사용해야 합니다. 변수의 스코프를 명확히 이해하고 글로벌 스코프를 적절히 관리하면 유지보수가 쉬운 SASS 코드를 작성할 수 있습니다.

다음은 꼭 기억해야 할 주요 포인트입니다:.

1. 변수는 기본적으로 자신의 스코프에 따라 작동합니다.

2. !global 플래그를 사용하면 글로벌 스코프의 변수를 업데이트할 수 있습니다.

3. 플래그 사용을 최소화하고, 의도치 않은 덮어쓰기를 피하도록 하세요.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video