Sass variable(Scss 변수)

 

Sass에서 변수를 사용하기 위해서는 $로 시작해야 하며 변수 값으로 올 수 있는 것은 문자, 숫자(px, em포함), 컬러(#1c6eff)가 있다.

 

 

1. SCSS 변수 사용예시

SCSS

$font-stack: Helvetica, sans-serif; /* font-stack 변수선언 */
$primary-color: #333; /* primary-color 변수선언 */

body {
  font: 100% $font-stack;
  color: $primary-color;
}

CSS

 

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

 

위와 같이 sass 변수를 사용하면 일괄적으로 관리하고 변경 가능하기 때문에 색상이 수정 되더라도 변수값만 수정 하면 되고 같은 색상을 일일이 써줄 필요 없이 변수 값만 적어주면 되기 때문에 일관성을 유지할 수 있다.

 

---

 

2. Sass변수와 css 변수

CSS 도 Sass처럼 당연히 변수 선언이 가능하다.

아래는 css 변수 사용방법 포스팅이다.

https://moo-you.tistory.com/371

css 변수 기본 사용법

 

Sass변수와 css 변수의 차이점

• Sass 변수는 모두 Sass에 의해 컴파일 되고 css 변수는 css 출력에 포함된다.
• css 변수는 요소마다 다른 값을 가질 수 있지만 Sass 변수는 한 번에 하나의 값만 갖는다.
• Sass 변수는 명령형이다. 즉, 변수를 사용한 다음 그 값을 변경해도 이전 사용은 그대로 유지된다. css변수는 선언적 이기 때문에 값을 변경하면 이전 사용과 이후 사용 모두 영향을 미친다.

SCSS

$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

 

CSS

.rule-1 {
  value: value 1;
}

.rule-2 {
  value: value 2;
}

 

---

 

3. 변수의 범위(Scope)

sass에서 변수의 범위는 크게 지역변수와 전역변수로 나눌 수 있다.

전역변수는 최상위에 선언된 변수로써 문서 전체에 영향을 미치는 변수이고

지역변수는 특정 영역 안에만 영향을 미치는 변수이다.

 

SCSS

$global-variable: red; //전역변수 선언

.content {
  $local-variable: blue; //지역변수 선언
  color: $global-variable; 
  color: $local-variable;
}

.sidebar {
  color: $global-variable;
}

CSS

 

.content {
  color: red;
  color: blue;
}

.sidebar {
  color: red;
}

 

만약 지역변수의 블럭을 넘어가는 범위에서 지역변수를 호출하면 에러가 난다.

$global-variable: red; //전역변수 선언

.content {
  $local-variable: blue; //지역변수 선언
  color: $global-variable; 
  color: $local-variable;
}

.sidebar {
  color: $local-variable; // 지역변수로 변경하면 에러가 난다
}

 

※ Sass 변수는 하이픈'-'과 언더바'_' 를 동일 시 한다 즉 $font-color, $font_color 둘 다 동일한 변수를 참조한다.

 

 

출처 : https://sass-lang.com/documentation/variables