[SCSS] 자바스크립트처럼 CSS에서 변수 선언하고 사용하기

SCSS의 변수 선언

/* SCSS */
$color-black: #000;
$color-grey: #666;
$item-w: 300px;
$item-h: 300px;
$img-url: "images/"

.item {
    width: $item-w;
    height: $item-h;
    color: $color-black;
    background-color: $color-grey;
}

자바스크립트의 변수 선언처럼 CSS에서도 변수를 사용하여 스타일링할 수 있는 방법이 있다.

자바스크립트의 var, let, const의 변수 선언 역할을 하는 '$'를 앞에 붙이고 '변수명: 값'을 넣어주면 된다.

참고로, 자바스크립트처럼 변수 값이 문자일 때는 따옴표("")로 감싸줘야 한다. (단, 속성값이나 px은 제외)

 

CSS의 변수 선언

/* CSS */
:root {
    --color-black: #000;
    --color-grey: #666;
    --item-w: 300px;
    --item-h: 300px;
}

.item {
    width: var(--item-w);
    height: var(--item-h);
    color: var(--$color-black);
    background-color: var(--color-grey);
}

변수 선언은 SCSS뿐만 아니라 순수 CSS에서도 가능하다. :root를 통해 변수로 선언될 값들을 모두 선언해주고, SCSS의 '$' 대신 '--'를 앞에 붙여주면 된다. 사용할 때는 var와 함께 사용해줘야 한다.

 

전역 변수와 지역 변수

/* SCSS */
$color-red: red;
.item {
    $item-w: 300px;
    $item-h: 300px;
    width: $item-w;
    height: $item-h;
}

.item-2 {
    width: $item-w; (Error!)
    height: $item-h; (Error!)
    color: $color-red;
}

자바스크립트의 스코프처럼 CSS에서도 스코프 개념이 있다. 전역 변수로 선언된 것은 어디에서나 사용 가능하지만, 지역 변수로 선언된 것은 그 블록안에서만 사용 가능하다. 위의 예시 코드를 한 번 보자.

$color-red는 전역 변수이고, $item-w, $item-h는 .item의 지역 변수이다. 따라서, $color-red는 .item과 .item-2 모두 정상 작동되지만 $item-w, $item-h는 .item의 블록을 벗어나는 순간 변수 선언한 게 사라지므로 .item-2에서는 에러가 발생하게 된다.

 

1. SCSS의 변수 선언은 '$변수명: 값'의 형태이다.
2. CSS에도 전역 변수와 지역 변수 개념이 존재한다.