블로그를 만들다가 파티클 애니매이션을 추가하려다 보니, SCSS 로 작업해야하는 부분이 있어서 Essepage 에서 SCSS 를 사용하는 방법에 대해 기록해둡니다.

자바스크립트로 브라우저에서 SCSS 를 컴파일하는 방법으로, SASS 팀의 블로그에서 소개한 방법을 참조했습니다.
https://sass-lang.com/blog/sass-in-the-browser/

테스트를 위한 코드 예제입니다.

<div>
    <span class="colored-text">빨간색 글자</span>
</div>

<style id="sass-style"></style>

<script>
    const sass = await import('https://jspm.dev/sass');
    const css = sass.compileString(`
        $textColor: red;
        .colored-text { color: $textColor; }
    `);

    document.querySelector('#sass-style').innerHTML = css?.css;
</script>

에스페이지에서 SCSS 를 사용해야한다면, 한 번 활용해보세요.