[SCSS, JS] JavaScript를 통해 SCSS 속성값 동적으로 연결하기

JS의 코드를 통해 SCSS의 속성값을 동적으로 변경하여 스타일을 동적으로 변경하고자 한다.

 

SCSS 파일 내부 코드

1. SCSS에서 :root 셀렉터를 사용하여 그 안에 동적으로 변경할 속성값을 기재하기

 

:root 셀렉터는 JavaScript와 CSS를 연결하는 문법이다.

 

커스텀 속성값의 변수명을 정의할 때에는 --(double hyphen)을 사용해야 한다.

그래야 브라우저가 CSS에서 사용할 수 있는 변수로 인식힌다.

--(double hyphen)이 없으면 브라우저는 이를 일반 CSS 속성으로 이해하여 의도한 커스텀 기능대로 작동하지 않는다.

 

2. var() 함수로 :root 내부의 속성값을 변수처럼 불러오기

 

:root {
  --elementColorCode: "#ff0000";
  --backgroundColorCode: "#0000ff";
}

.target-element {
  background-color: var(--menuBarColorCode);
}

.background {
  background-color: var(--backgroundColorCode);
}

 

JavaScript 파일 내부 코드

1. document.documentelement.style.setProperty 문법 사용 (코드 예시)

 

React에서도 사용 가능하지만 React에서는 DOM을 직접 사용하는 것은 추천하지 않는다.

 

2. 인라인 스타일 사용

 

인라인 스타일을 사용할 경우 SCSS에 코드를 작성할 필요는 없다.

 

// elementColor, backgroundColor는 동적으로 변경되는 변수

useEffect(() => {
  document.documentElement.style.setProperty(
    "--elementColorCode",
    `${elementColor}`
  );
  document.documentElement.style.setProperty(
    "--backgroundColorCode",
    `${backgroundColor}`
  );
}, [elementColor, backgroundColor]);