インターン先でreact + typescript + scssのお仕事をしている @haduki1208 と申します。
最近reactよりscssを多く書いてる気がします。割と楽しいです。

TL;DR

CSSでJavaScriptの値を取得する

趣味で「任意の大きさ・色・向きを指定できる矢印アイコン」を作っていた時に

「CSSでJavaScriptの値を取得できないのか?」

と思ったのでやってみました。

cssにattr()という関数がありますが、content属性でしか動作しないようです。
今回はheight, width, background-color, rotateに任意の値を使いたいのですがダメです。微妙な仕様ですね。

最初に作った矢印アイコンのソースコードです。

このコードの弱点は以下になります。

1番、2番は面倒くさいです。
これらを全て解消してみます。

ポイントは以下になります。

これでscssを編集せず色々なアイコンを作ることができます！

こんなことするなら、最初からstyled-componentsにすれば良いじゃないと思った人もいらっしゃるでしょう。
僕は今までstyled-componentsを使ったことがなかったので、勉強のため置き換えをしてみました。

なんて素晴らしいライブラリなのでしょう。
scss、インラインスタイル、as any　全て消え去りました。
(ついでにwebpack.config.jsからstyle-loader, css-loader, sass-loader, postcss-loaderも消え去りました)

styled-componentsに惚れてしまいそうです。

react + scssで開発をしているプロジェクトでJavaScripの変数を取得したくなった時はこの方法で解決できそうです。

既にscssで開発しているプロジェクトでは、styled-componentsに移行するにも時間がかかってしまうので、もしcssからjavascriptの値を使いたくなったら、ご検討ください。