同階層にあるscssファイルを最も簡潔に@useする方法

Posted at 2022-06-11

はじめに

ドワンゴでニコニコ生放送のWebフロントエンジニアをやっています @misuken です。

今回は開発でよく使っているSassのちょっとしたtipsを紹介します。

みなさんはReactなどでコンポーネントを作る際のSassの管理方法をどのようにしているでしょうか？
全てではないにしろ、再利用するような定義やmixinなどをコンポーネント単位で定義ファイルみたいなものにまとめていたりしませんか？

あまり他の人の管理術みたいなものを見たことがないのでわからないのですが、筆者はそのような定義ファイル系はindex.scssという名前にしています。

なぜこうするかというと、他のディレクトリから参照するときに簡潔に書けて都合が良いからです。

例えば以下のパスにButtonコンポーネントのSassの定義があったとします。

path/to/button/index.scss

@mixin xxx() {
  // 省略
}

これを他のコンポーネントから利用するとき、ディレクトリ名まで書くだけで読める上に、名前空間も良い感じに当たります。

path/to/sample-form.scss

// path/to/button/index.scss を読んで名前空間が "button" になる
@use "path/to/button";

.submit-button {
  @include button.xxx();
}

さらに、Buttonコンポーネントの同階層から読むときは、.と書くだけでindex.scssを読むことが出来ます。そして、同階層の場合は名前空間が無いほうが都合が良いのでas *を追加してそのスコープに展開します。

path/to/button/button.scss

// index.scss を読んで名前空間無しで展開する
@use "." as *;

.button {
  @include xxx(); // そのまま書ける
}

コンポーネントのscssファイルはこのようにしています。

button
  index.scss  // 定義類を書くファイル
  button.scss // セレクターを書くファイル

基本的に定義系はindex.scssから提供すると使いやすいので、社内で使用するSassのユーティリティなどは@nicolive/stylesのパッケージ直下にindex.scssが来るようにすることで、利用する側は以下のように簡潔に書けるようになっています。

@use "@nicolive/styles";

.sample {
  font-size: styles.$font-size1;
  color: styles.$color-mono1;
}

今までのところこの書き方で問題が生じたことはないのですが、もしこのやり方に何か問題がある場合は教えていただけると幸いです。

完全に余談。Sassの補完やコードジャンプがIntelliJはわりといい感じなのですが、VSCodeで開発しているメンバーはプラグインを入れてもイマイチらしいので、他の方がどうやって作業効率を上げているのか気になっています。