[SASS - SCSS] 2-3. 변수 $ 기호 내용정리

3. 변수 $ 기호

초반에 SASS 기초 정리를 하면서 변수 $ 기호를 사용한다고 작성 하였습니다. 가장 중요한 변수 처리이고, 변수를 잘 처리하면 더 용이하게 코드 작성을 할 수 있습니다. 변수에는 $ 기호를 사용합니다.

 

SASS에서도 지역변수와 전역변수가 존재합니다. 전역변수는 선택자 외부에 선언하는 방법과, 지역변수 부분에서 !global이라고 지정을 하게 되면 전역변수가 선언이 됩니다.

 

$main-width는 전역변수로 선언이 되었습니다. 나중에 프로젝트로 돌입하게 되면 별도로 분리하는 것이 용이합니다. 별도의 파일을 만들어서 호출해서 부르는 형식으로 말이죠.

 

#main에서 $width: 10px !global; 이렇게 !global을 작성하게 되면서 $width는 전역변수가 됩니다.

 

#sidebar에서는 width: $width*50 지역변수가 따로 없기 때문에 전역변수인 10px를 불러오기 때문에 10px * 50으로 500px 값이 CSS에서는 출력이 됩니다.

 

#content {

  $width:400px;

  width: $width;

}

 

위의 코드에서는 $width를 지역변수로 선언했기 때문에 width에서 $width값은 전역변수의 10px이 아닌 바로 위의 지역변수인 400px의 값이 나오게 됩니다.

 

- , _ 달라도 된다?

하이픈과 언더바의 기호가 다른데, 컴파일을 하게 되면 모두 동일한 기호로 인식하게 됩니다. 변수 이름에 하이픈으로 되어있는 것을 실제 적용할 때는 언더바로 이름을 바꿔도 값은 동일하게 나옵니다. 

 

$main-width: 100%  = $main_width: 100%