다음과 같은 SCSS코드를 보자.

$color: royalblue;
.container {
  position: fixed;
  top: 100px;
  .item {
    width: 100;
    height: 100;
    transform: translateX(100px);
  }
}

여기서 100px, 200px 등의 숫자가 사용되고 있다.

우리가 도입할 건 이 숫자들을 변수화해 재사용, 그리고 일괄 관리하는 것임.

다음과 같이 변수를 선언하자.

$color: royalblue;
$size: 100px;

이제 다음과 같이 값을 변수화해 사용할 수 있다.

$color: royalblue;
$size: 100px;

.container {
  position: fixed;
  top: $size;
  .item {
    width: $size;
    height: $size;
    transform: translateX($size);
  }
}

⚠️ SCSS의 변수도 유효범위가 있다.

전역에 선언하면 전역에서 사용할 수 있다.

하지만 {} 안에 선언하면, 해당 중괄호가 변수의 스코프가 된다.

⚠️ SCSS의 변수는 JS의 변수와 유사하다. var 변수처럼 재할당이 가능한 변수이기 때문에, 똑같은 변수명이라면 스코프와 상관없이 가장 최근에 할당된 값이 적용된다고 함…

$color: royalblue;
$size: 100px;

.container {
  position: fixed;
  top: $size;
  .item {
  	$size: 200px; //변수 재할당
    width: $size;
    height: $size;
    transform: translateX($size);
  }
  left : $size; //size는 200px이 적용된다.

}

• 변수는 자주 중복되는 경로 등을 저장해 사용하는데 유용하다.