🐄

scssの@importが非推奨になったのでcssで書いてみた

2024/07/30に公開

CSS

Scss

tech

いつのまにかscssの@importが非推奨になっていたので
アップデートしてみましたが
cssで書いた方がわかりやすくなりました。

環境

windows
nodejs v20.16.0
Gatsbyjs
https://www.gatsbyjs.com/

前：@importで変数読み込み

@import './color.scss';

.product_block{
  flex: 1;
  height: 15em;
  margin: 1.5em .5em;
  background-color: $sub_color;
  > div{
    margin: 1em 1.5em 1.5em 1.5em;
    color: $white;
  }
}

あと：@useで読み込み

@use './color';
/**  すごく長いディレクトリだった場合、代替名をつけることもできる */
/** @use '/your/style/path/style/color' as color; */
.product_block{
  flex: 1;
  height: 15em;
  margin: 1.5em .5em;
  background-color: color.$sub_color;
  > div{
    margin: 1em 1.5em 1.5em 1.5em;
    color: color.$white;
  }
}

つかいわけ

ドキュメントななめ読みでざっとつかんだ使い分け。
^[1] ^[2]

_(アンダースコア)で始まるファイルを読み込むときは基本@useらしい^[3]

ルール	用途
@forward	複数ファイルを参照
@use	直接値を使う

_color.scss

$white: #ffffff;

style.scss

@forward './color';

base.scss

@use './color';
.bk {
 background-color: color.$white;
}

変数に対していちいち@useで指定したファイル名書かないといけないので結構大変

あれ..cssでできるのでは？

cssでもネスト指定できるようになっていたので以下でも同じことができた。

:root {
  --sub_color: #acbfbf;
  --white: #fefefe;
}

.product_block {
  flex: 1;
  height: 15em;
  margin: 1.5em .5em;
  background-color: var(--sub_color);
  & > div {
    margin: 1em 1.5em 1.5em 1.5em;
    color: var(--white);
  }
}

あまり複雑なスタイルじゃなければ
cssでスタイル定義できると思います。
あと、いちいち@useで指定したファイル名書かないといけないので
ファイル分割しすぎると面倒なことになるのは目に見えますね。

脚注