6. 변수

SCSS에는 자바스크립트처럼 변수를 선언할 수 있는 기능이 존재한다. 다음과 같이 사용한다.

$size: 200px;

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

.box {
  width: $size;
}

선언할 변수 이름 앞에 $기호를 붙히고 = 기호 대신 :기호를 사용한다. 이 변수또한 전역변수 지역변수가 있으므로 요소 안에서 선언할 시 지역변수 밖에서 선언할 시 전역변수로 사용된다. 선언 된 범위 안에서 우선적으로 적용된다. 

CSS로 변환하면 다음과 같다.

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

.box {
  width: 200px;
}

특징

• 재활용이 용이하다.
• 선언 된 범위에서 유효범위를 가진다.