[Sass/SCSS] 변수(Variables)

혼자 공부하고 정리하려고 만들었지만
혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝
전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오..

$변수이름

변수를 사용하여 단순한 속성값 뿐만 아니라, 복잡한 수식 실행, 라이브러리 구성 등의 작업을 수행할 수 있다.

⚡ CSS에서의 변수와 Sass에서의 변수 차이점 (잘 이해한 건지 모르겠다)

Sass 변수 - imperative : 변수를 사용한 다음에 값을 변경하면 영향을 미치지 않는다.
CSS 변수 - declarative : 변수를 사용한 다음 값을 변경하더라도 영향을 미친다.

💡 Sass 변수는 하이픈( - )과 언더바( _ )를  구분하지 않는다.
    Ex > $font-size와 $font_size는 동일한 변수로 인식된다.

기본값 (Default Value)

변수에 값을 할당하는데 이미 변수가 값을 가지고 있다면, 이전 값은 덮어 씌워진다. (변수 재정의)
그런데, !default 플래그를 사용하면, 이전 값을 덮어 씌우지 않을 수 있다.
!default 플래그의 의미가 다음과 같기 때문.
"값이 이미 있다면 무시하고, 값이 정의되지 않았거나, 없다면 작성한 값을 할당하라."


example : 

$main-color : black;
$main-color : blue;
$main-color : red !default;

위와 같은 코드를 작성하면, 결과적으로 $main-color의 값은 blue가 되는 것이다.

변수 유효범위(Variable Scope)

블록 밖에 작성되었다면 어디서나 사용이 가능하지만,
블록 내에서 작성되었다면 해당 블록 내에서만 사용이 가능하다.

Shadowing
로컬 변수와 전역 변수의 이름이 같은 경우, 실제로 동일한 이름을 가진 두개의 다른 변수가 존재하게 된다.

로컬 범위(블록 내 혹은 믹스인 내)에서 전역 변수의 값을 설정하고 싶다면, !global 플래그를 추가하면 된다.

.box{
  $bg-color : #333 !global;
}

❌ 주의할 점: !global 플래그는 파일 상단에 이미 정의된 변수에 대해서만 사용할 수 있다. 새롭게 정의하는 변수에 사용하면 안된다.

흐름 제어 범위(Flow Control Scope)
흐름 제어 규칙에서 선언된 변수는 특별한 범위 규칙이 있다. 흐름 제어 규칙과 같은 레벨에 있는 변수는 shadow 처리하지 않는다. 이를 통해, 조건에 따라 값을 변수에 할당하거나 반복의 일부로 값을 쉽게 만들 수 있다(?)

$dark-theme: true !default;
$primary-color: #f8bbd0 !default;
$accent-color: #6a1b9a !default;

@if $dark-theme {
  $primary-color: darken($primary-color, 60%);
  $accent-color: lighten($accent-color, 60%);
}

.button {
  background-color: $primary-color;
  border: 1px solid $accent-color;
  border-radius: 3px;
}

 

이 부분은 사실 잘 이해가 가지 않는데........... 아마 이런 말인 것 같다.
원래대로라면 shadowing에 의해 line2 에 있는 $primary-color와 line6에 있는 $primary-color는 이름은 같지만 실제로는 다른 변수여야 한다.
하지만 @if 플래그가 있기 때문에 shadow 처리되지 않아, 동일한 변수로 작동하고 있다.