자바스크립트에서 SCSS 변수 사용하는 방법(Share SCSS Variables with Javascript)

사전 요구 사항

프로젝트에 구성되어있는 webpack에서 sass를 사용할 수 있게 구성해야 됩니다.

사용방법

자바스크립트에서 SASS(SCSS) 변수를 사용하는 방법은 SCSS의 export구문을 사용하면 됩니다. SCSS의 변수를 관리하는 variables.scss에 하단에 export 구문을 사용하고 사용하고 있는 SCSS 변수들을 그 내부에 추가합니다.

// variables.scss
$white-color: #fcf5ed;
$dark-color: #402f2b;
$light-color: #e6d5c3;
$medium-color: #977978;
$alert-color: #cb492a;
$light-black-color: #706e72;
$black-color: #414042;

:export {
  whitecolor: $white-color;
  darkcolor: $dark-color;
  lightcolor: $light-color;
  mediumcolor: $medium-color;
  alertcolor: $alert-color;
  lightblackcolor: $light-black-color;
  blackcolor: $black-color;
}

컴포넌트에서는 variables SASS 파일을 import 해서 사용하기만 하면 됩니다. Vue 컴포넌트에서 사용하는 예시입니다.

// component
<template>
  <div id="app">
  hello
  </div>
</template>

<script>
import variables from './assets/_variables.scss';
console.log(variables)
export default {
  name: 'App',
}
</script>

<style>
</style>

컴포넌트에서는 아래와 같이 변수 객체를 받아서 사용할 수 있습니다.

실제 컴포넌트에서 SCSS 변수 객체를 사용하는 모습

리액트에서도 아래와 같이 쉽게 사용할 수 있습니다.

import variables from 'variables.scss';

const CSS = {
  backgroundColor: variables.blackcolor
}

export default ({}) => {
  return <div style={CSS}>Content</div>
}