svelte에서 변수값을 style에 사용하는 방법

참고 Javascript Interpolation in Styles via CSS Variables? | Issue #758

<sciprt>
let size = 10;
</script>

<div></div>

<style>
	div { width : size; }
</style>

script태그 내 변수를 스타일에 적용하고 싶지만, 위와 같은 방식으로는 불가능하다.

<script>
	let size = 100;
	function up() {size += 5;}
	function down() {size -= 5;}
</script>

<section>
	<p>{size}</p>
	<button on:click={up}>up</button>
	<button on:click={down}>down</button>
</section>

<div style='--size:{size};'></div>

<style>
	div {
		width : calc( var(--size) * 1px );
		height : calc( var(--size) * 1px );
		background-color : green;
	}
</style>

css 변수로 script태그 내 변수를 넘겨주는 꼼수를 사용하여 문제를 해결할 수 있다.

REPL에서 보기 링크