SCSS 문법 (변수)

변수 선언

$변수명 : 변수의 값;

 변수 규칙

  1. $로 시작

  2. 변수 선언 시 해당 문자만 허용 (영문, 숫자, _ , - )

$marginTop : 20px;

.item {
    margin: $marginTop;
};​

 

전역변수와 지역변수

전역변수 : scope 외부에서 선언될 경우 전역으로 사용 가능

 margin: $marginTop;

.item01 {
   $marginTop : 20px;
};

.item02 {
   margin: $marginTop;
};

 

지역변수 : 아래와 같이 scope 내부에서 선언될 경우 외부에서 사용 할 수 없다.

.item01 {
   $marginTop : 20px;
    margin: $marginTop;
};

.item02 {
   margin: $marginTop;
};

 

변수를 전역 범위 사용 하기 (!global)

지역변수를 전역변수처럼 하기 위해서 !global 를 사용한다.

.item01 {
   $marginTop : 20px;
    margin: $marginTop;
};

.item02 {
   $marginTop : 20px !global;
};

 

중복된 변수 선언시 기본값 적용 (!default)

변수가 중복으로 선언시 미리 선언된 변수를 기본값으로 선언하기 위해서 !default 를 사용한다.

아래와 같이 선언시 yellow값이 적용되어 나타난다.

$yellow: yellow;
$yellow: blue !default;

Default 변수 파일 (variables.scss)을 만들어 모듈을 관리 하는경우 !default를 사용하여 의도하지 않은 스타일 변경을 예방