[Svelte] CSS style 변수 사용하는 방법

1. Custom Properties 활용

<script>
    let color = '#ff3e00';
</script>

<div style="--theme-color: {color}">
    <p>
        the color is set using a CSS variable
    </p>
</div>

<input type="color" bind:value={color} style="height: 50px;">

<style>
    p {
        color: var(--theme-color);
    }
</style>

 

사용하는 상단 div에 커스텀 프로퍼티(--theme-color: {color})를 넣고

하단 style에서 var를 활용해 해결하면 됩니다.

 

* 커스텀 프로퍼티(Custom Property)는 앞에 더블 하이픈(--)으로 시작합니다.

 

참조

[svelte dev]: https://svelte.dev/repl/4b1c649bc75f44eb9142dadc0322eccd?version=3.6.7

CSS variables • REPL • Svelte

[mdn custom properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN