SCSS의 변수 사용법에 대해 Araboza

오늘 우리는 SCSS의 변수 사용법에 대해서 아주 기초적인 사용법을 각종 예시와 함께 살펴볼거야!

SCSS에서 변수를 선언할 때 $ 기호를 써야 하는데 그냥 $를 쓰라고 하면 잘 모르니까 간단한 예시를 들어볼게!

$main-color: blue; // 변수 선언

이렇게 변수를 선언했다면 사용도 해야겠지? 사용하는 법 역시 엄청 간단한데,

body{
background-color: $main-color, // 변수 사용

예를 들어 background-color에 가져다 쓰고 싶으면 그냥 선언한 변수를 뒤에 쓰기만 하면 끝이야!
이렇게 사용하면 나중에 색을 바꿀 때 그냥 $main-color만 바꿔주면 되니까 아주 편리해!

다음으로 우리는 다양한 데이터 타입 변수 사용 예시를 알아볼건데, SCSS 변수는 여러 타입을 가질 수 있어. 내가 하나씩 쉽게 지금부터 설명할거야.

(1) 색상
맨 첫번째로 색상이야. 색상 변수는 만들어두면 유지보수를 할 때 아주 개꿀이니까 잘 알아둬.

$first: red;
$second: aqua;

.button {
  background-color: $first;
  color: $second;
}

색상은 아주 쉽지? 그냥 $변수 이름 에다가 : 뒤에 색상값만 입력하면 끝이야!
그리고 변수 이름은 그냥 알기 쉽게 first, second로 했지만 당연히 너가 원하는 변수명으로 자유롭게 바꾸면 돼!
하지만 남들이 봤을 때 알아보기 쉽게끔 직관적인 변수명을 사용하는게 좋겠지?

(2) 숫자
다음은 숫자에 대해 알아보자.
우리가 전에 css에서 쓸 때 혹시 크기를 조절할 때 썼던 단위들 혹시 기억 나?
픽셀(px)라던가, %(퍼센트)말이야. 이런 것들도 다 SCSS에서도 쓸 수 있는 단위들이야. 심지어 계산도 가능해!

$base-font-size: 16px;
$margin-size: 10px;

.text {
  font-size: $base-font-size;
  margin: $margin-size * 2; // 20px
}

보면 우리가 원래 css에서 많이 썼던 문법이 그대로 있는 걸 볼 수 있지?
심지어 $margin-size * 2 하면 자동으로 20px로 계산되는걸 볼 수 있어. 엄청 편하지?

(3) 문자열
문자열 변수도 당연히 지정 가능해. font-family 같은 거 관리할 때 엄청 편하지.

$main-font: 'Arial, sans-serif';

.text {
  font-family: $main-font;
}

여기서 만약 폰트가 바꾸고 싶으면 그냥 $main-font 하나만 바꿔주면 끝!

(4) Boolean(true/false)
true나 false도 변수로 저장 가능한거 알고있어? 이건 알면 조건문에서 엄청 유용하게 사용 가능해!

$dark-mode: true;

body {
  @if $dark-mode {
    background: black;
    color: white;
  } @else {
    background: white;
    color: black;
  }
}

위에 코드에서 만약 라이트 모드로 바꾸고 싶다면 그냥 $dark-node 값만 false로 바꿔주면 자동으로 라이트 모드가 적용돼!

아무튼 오늘은 여기서 이만 마칠게! 다음에 또 보자~