Sass 변수 $

변수를 정의하고 사용하기

2017년 7월 28일 수정5-7분 읽기태그: Sass, CSS Preprocessor, Web Development

SassScript를 사용하는 가장 직접적인 방법은 값을 변수에 담아 사용하는 것이다. 직접 값을 입력하는 대신 변수를 사용하면 같은 목적의 값을 하나의 변수로 관리하며 여러 곳에 할당할 수 있고, 실수로 값을 잘못 입력할 경우를 줄여주며, 값을 수정하기도 훨씬 쉬워진다.¹

변수 `$`

변수 정의하기

변수 이름은 반드시 $ 달러 기호로 시작한다. 그러므로 변수가 어디서 어떻게 사용되는지 한 눈에 알아볼 수 있다. 변수를 정의하는 문법은 CSS 속성 구문과 같이 변수 이름: 값; 형태를 띤다.

변수 정의 예시

// 변수 이름: 값;
$width: 5em;

변수 사용하기

변수는 다양한 곳에서 사용할 수 있지만 가장 기본적인 사용법은 속성값으로 할당하는 것이다.

변수 사용 예시

$width: 5em;
#main {
  width: $width;
}

출력 결과 - 변수가 값으로 변경됩니다.

#main {
  width: 5em; }

SassScript 사용 범위에서 정리한 것처럼 변수는 이외에도 다양한 용도로 쓰인다. 이에 대한 예시는 각 부분에서 볼 수 있다.

변수 범위

다른 언어에서 변수가 그렇듯이 Sass에서도 변수도 범위 ^Scope를 가지며, 전역과 지역의 두 가지로 나뉜다.

전역 변수

(1)문서 최상위에 바로 작성한 변수는 전역 변수이다. 어떤 규칙에도 포함되지 않은 경우이다. 전역 변수는 문서 어디에서나 사용할 수 있다. 전역 변수를 정의하는 또 다른 방법이 있는데, (2)지역 범위에서 변수를 정의할 때 !global 플래그를 함께 써넣으면 전역 변수가 된다.

전역 변수 예시

$width: 5em; // 문서 최상위에 작성한 전역 변수
#main {
  $height: 10em !global; // 규칙 내부에 작성했지만 전역 변수
  width: $width;
  height: $height;
}
 
#sidebar {
  height: $height; // !global 플래그로 작성한 전역 변수를 사용했습니다.
}

지역 변수

문서 최상위가 아닌 규칙 내부에 변수를 정의했다면 이는 지역 변수이다. 지역 변수는 규칙의 중첩 수준에 따라 사용할 수 있는 지역의 범위가 한정된다. 지역 변수를 정의한 규칙보다 상위의 규칙에서는 사용할 수 없다.

지역 변수 예시 - 규칙 중첩 수준에 따른 사용

#main {
  $padding: 2em; // 지역 변수 정의
  paddiing: $padding;
  .content {
    paddiing: $padding; // 하위 규칙에도 사용 가능
  }
}
 
#sidebar {
  paddiing: $padding; // 지역 변수의 범위를 벗어났습니다. 해당 변수가 없으므로 에러가 발생합니다.
}

지역 변수는 정의된 범위 안에서 사용한다. 전역 변수와 지역 변수의 이름이 같으면 참조하는 값을 혼동할 수 있으므로, 범위와 이름을 구분해 작성한다.

전역 변수와 지역 변수가 같은 이름일 때 예시

$font-size: 2em; // 전역 변수
#main {
  .content {
    $font-size: 1.5em; // 지역 변수
    font-size: $font-size; // 1.5em - 지역 변수값
  }
  .footer {
    font-size: $font-size; // 2em - 전역 변수값
  }
}

원문 ↩

변수 $