Dart Sassの書き方 – SUBARU WORKS

npmでSassを利用するときに推奨となっている「Dart Sass」ですが
その書き方がちょっと分かりにくくてどうも使いにくい感じがしたりもします。

そこで、今回はDart Sassの基本的な記述法についてまとめて行きます

Dart Sassとは

npmでプロジェクトのリポジトリなどを作る場合…

$npm i -D sass

のコマンドでパッケージをインストールします。

この時にインストールされるのが「Dart Sass」です。
表記上は「sass」となるので特に名前を見かけることはほとんど無いかと思います。

@use は　scssファイルから、他のscssファイルを読み込む時に利用します。

例えば、変数の設定をまとめた　_variables.scss を作成し、
それを他のファイルで読み込む…　などはよくあるパターン

style.scssの記述

@use "variables";

Dart Sassでは、ファイル名の先頭の「_（アンダースコア）」と、拡張子の「.scss」を省略して書くことができます。

呼び出すファイルが複数ある場合は連続して書くこともできますが、scssの記述の後に記述することはできません

@use "file_name_1";
@use "file_name_2";
@use "file_name_3";

body {
  margin: 0;
}

@use "file_name_1";
@use "file_name_2";

body {
  margin: 0;
}

@use "file_name_3";

@use で読み込んだ変数や関数を使う場合は「名前空間」を先頭に付ける必要があります

@use "variables";

body {
  color: variables.$red;
}

このように、 $red の前に、名前空間で「variables」を記述する必要があります。

これは呼び出し元のファイル名によって変わります。

毎回「variables」と入力するのは少し面倒なので
以下のようにして省略した記述にすることもできます。

@use "variables" as v;

body {
  color: v.$red;
}

実際の作成時には、_variables.scss と style.scss の2ファイルだけで完結…ということは無く

複数のファイルを跨いでスタイルを設定するかと思います。

例えば…
_variables.scss を _component.scss で呼び出し、それを style.scss で呼び出したい場合…

_variables.scss

$blue:      #3d77b2 !default;

_component.scss

@use "variables" as v;

style.scss

@use "component" as c;

body {
  color: c.$blue;
}

このように記述すると、コンパイル時にエラーが出発します。

これは、style.scss からは _variables.scss の値を見ることができないためです。

この構造を使えるようにするには…@forward を利用します。

@forward は参照元の内容を「転送」させることができます。

先程の例をコンパイルできるようにするには、次のようにします。

_component.scss

@forward "variables" as v;

これでコンパイルできるようになりました。

次に、_component.scss にスタイルをの記述をしたくなって
次のように書き換えたとします。

_component.scss

@forward "variables";

div {
  color: v.$blue;
}

このコンパイル結果はエラーとなります。

_component.scss にスタイルの記述がない時はコンパイルできたのに、
変数を利用しようとしたらエラーが出るのはなぜなのか…

それは、@forward　が「転送」を行うだけで、「中の値を参照はできない」ということになります。

よって、 _component.scss でも _variables.scss の値を参照する場合は次のようにします。

_component.scss

@forward "variables";

@use "variables" as v;

div {
  color: v.$blue;
}

@forward の他に、@use も併用し値を参照できるようにします。

コンパイルできる例

_variables.scss

$blue:      #3d77b2 !default;

_component.scss

@forward "variables";

@use "variables" as v;

div {
  color: v.$blue;
}

style.scss

@use "component" as c;

body {
  color: c.$blue;
}

これで複数のファイルを跨いで変数・関数を利用できるようになりました。