Dart-Sassを書いてみる

前回はDart-Sassをインストールするところまでやりました。今回は実際にscssを書いて行ってみます。

1. @useで他のファイルを読み込む

他のファイルを読み込むのは@useを使うみたいですので、
foundationの_base.scssと_reset.scssを読み込んでいきます。ディレクトリ内のscssは「_index.scss」でまとめることができるようですね。具体的には以下の感じです。

まずディレクトリ構造はこんな感じ。

/
|- app.scss
|- foundation/
  |- _index.scss
  |- _base.scss
  |- _reset.scss

次に「app.scss」の中身はこんな感じです。「foundation」内のファイルを読み込むときには、「_index.scss」があるので、ディレクトリ名だけをuseすればいいということですね。ちなみに読み込まれる想定のファイルには、ファイル名の頭に「_」アンダーバーをつけるといいようです。コード内での読み込みではこんな感じでアンダーバーをつけなくてもいいみたいですね。

@use "sass:map";
@use "foundation"

「_index.scss」の中身はこんな感じです。
他のファイルを読み込んであげます。

@use "base";
@use "reset";

続いて「base」と「reset」の中身です。

.base {
  width: 100%;
}

.reset {
  width: 100%;
}

書いたらビルドします。

npm run build

「dist/app.css」に無事書き込まれていましたね。

.base {
  width: 100%;
}

.reset {
  width: 100%;
}

/*# sourceMappingURL=app.css.map */

これで1ファイルにまとまりました。最低限の動きはできた感じですね。

2. 変数を使う

他のファイルで設定した変数を使ってみます。さっきの_base.scssに変数を書いてみます。

.base {
  width: 100%;
}

// 変数
$color: #cc0000;

そして読み込んだ先で変数を使います。

@use "base";
@use "reset";

.test {
  background: base.$color;
}

useの名前に変数名を繋げて使います。
「base.$color」ってかんじですね。
コンパイル後はこんな感じです。

.test {
  background: #cc0000;
}

/*# sourceMappingURL=app.css.map */

ポイントは@useをしたところじゃないと使えないということです。
試しに@useしていないところで変数を使うとエラーになりました。

3. @useで読み込みができない場合

上記で試したとおり、変数は@useを読み込んだところしか使えませんでした。じゃあたとえば全ファイル共通の変数を読み込むときにどうするんだろう？各ファイルすべてに読み込みたい全ファイル分の@useを書くかといってもそれもしんどい。そこで「@forward」を使うようですね。
たとえばさっきのだと、こんな感じ。

@forward "base";
@forward "reset";

読み込んだ先ではこんな感じ。

@use "sass:map";
@use "foundation";

.test {
  background: foundation.$test;
}

ポイントは「foundation.$test」の部分。「base」が入っていませんね。
@forwardで読み込んだら、そのファイル名は必要ないようです。ややこしいですね。

これで他のファイルから読み込まれても「base」や「reset」の変数を使えるようになりました。
以前のように@importで他ファイルを読み込んだらどこでも使える！、って感じじゃないっぽいですね。

ややこしいですが、意図しない挙動が起きるよりは全然いいですね。

今回は以上です！