[DX]: Sass のリファクタリング

TwoSquirrels commented 2 years ago

gendaineko2222 commented 2 years ago

pages/global.scss に :root をおけばどこからでも var(変数名) で読み込めるからそっちのほうがシンプルかもです

例：

pages/global.scss

:root {
  --c-black: #000;
}

〇〇.module.scss

.title {
  color: var(--c-black);
}

TwoSquirrels commented 2 years ago

どっちがいいんだろ CSS 変数と Sass 変数の使い分けの基準よくわかってない()

TwoSquirrels commented 2 years ago

なんとなくだけど、特別な理由がない限りは Sass 変数を使ったほうがいいと思ってる。

TwoSquirrels commented 2 years ago

デメリットがあるらしい

gendaineko2222 commented 2 years ago

いろいろ調べてみた感じだとcssのほうがいいかなと思いますた

プリプロセッサを使用するため静的であり、通常のCSSにコンパイルされるため継承されるブラウザのサポートに考慮されない。
ネイティブCSSプロパティはカスケードする (上流で適用されたスタイルを引き継ぎ、競合する場合は上書きしながら、段階的に設定していくことを意味するという意味らしい) ため現在の値を設定または上書きできる。
ネイティブCSSプロパティの値が変更されると（メディアクエリやその他の状態など）、ブラウザは必要に応じて再描画する。
JavaScriptでそれらにアクセスして操作が可能。

SCSS形式の変数に依存する一部のカスタムSCSS関数ではCSS変数を色に変換してくれないため「Argument $color must be a color」というエラーが発生するらしい

TwoSquirrels commented 2 years ago

gendaineko2222 commented 2 years ago

なるほど静的であることがメリットとも取れるのか… たしかに特に理由がない限り、プリプロセッサ変数を使って、使いたい場所でcssカスタムプロパティを使うのが一番良さそうですね

TwoSquirrels commented 2 years ago

特に Next.js の Module CSS 機能を使って CSS をモジュール毎に分割しているので、それに合わせて Sass 変数を使ったほうがいいかなと思った。 CSS 変数は子要素に勝手に伝搬しちゃうから。

TwoSquirrels commented 2 years ago

ここの色も #7cc28e ではなく #b9d08b にしたいから、 Sass から引っ張ってくるようにするといいかも

uchikoshi-fes / uchikoshi-fes.jp-2022