Ruby Sass、Lib Sassはもう古い！

Ruby Sass,Lib Sassは近々サポートが終了するとのことなので、思い切って移行してみました。

意外と情報が潤沢にあったのですが、ベストプラクティスな実装がどれなのかはいまいちわかりませんでした。

とりあえず、Ruby Sassのような記述方法に近いやり方で実装したかったので、その実装方法をまとめました。

@useについて

ファイルの先頭に@use～を宣言でそのファイル内でのみ対象ファイルをアクセス可能にする。
@useは基本的にlayoutやobject配下等のファイルを読み込むときに使用する。変数や関数等どこでも使い回したい場合には@useは適さない。

@forwardについて

Forwardを使う場面として、基本的には変数や関数等使い回すようなファイルを指定するときに使用する。(例外もあるとは思いますが基本的な部分として)
vars.scssやmixin.scssなど繰り返し使う系のやつは_index.scssとかに集約して単独でエクスポートするのがスマートっぽい。

名前空間(namespace)について

変数を参照する場合は名前空間に応じて指定する必要があるが、RubySassのような記法で指定しない方法もある。
名前空間を設定するメリットとしては、どこのファイルで使われているメンバなのか把握しやすくなる。

名前空間の宣言について

名前空間の命名は各案件や会社の思想に沿う形になると思います。
名前空間は、ディレクトリ階層が異なる場合でも同じ命名を使用することはできません。
コンパイルエラーになります。

名前空間の宣言なしの場合

@use ‘../foundation/vars’; 

color: vars.$color-red;

名前空間を指定する場合

@use ‘../foundation/vars’ as v;

color: v.$color-red;

名前空間を完全に取り除く場合

Ruby Sassのような古い方法のように記述することが可能になります。
僕的にこれが一番しっくりきました

@use ‘../foundation/vars’ as *;

color: $color-red;

実装例

実装例として、CSS設計はFLOCSSを用いています。

Dart Sassは従来に比べると少し面倒な部分があります。
実装していく中で、変数やmixin等、全体に対して使い回したいファイルがあるかと思います。
従来であればstyle.scssの中にそれらファイルを@importさせるだけで展開できました。

Dart Sassの場合、style.scssの中に@use '変数やmixin以外のファイルパス';を宣言、
さらに_index.scssで@forwardを宣言したファイルは展開したいファイルの先頭に@useで宣言する必要があります。ここが正直面倒くさい、、。

では実際見ていきましょう。

ディレクトリ構成

├── sass
│  ├── foundation
│  │  ├── _base.scss
│  │  ├── _index.scss //@forwardするファイルをindexに集約
│  │  ├── _reset.scss
│  │  └── _var.scss
│  ├── layout
│  │  └── _header.scss
│  └── object
│     └── project
│          └── _header.scss
└── style.scss //@useでfoundation以外のファイルを記載

Foundation内の_index.scssについて

_index.scssにfoundation以下のファイルパスを集約させる理由としては、style.scssに単独でエクスポートさせるためです。

./foundation/_index.scss

@forward "./reset";
@forward "./var";
@forward "./base";

style.scssに記述する内容

名前空間を宣言している理由としては、ファイル名が重複しているためです。

style.scss

@charset "UTF-8";

//./layout
@use "./sass/layout/header" as l-header;
@use "./sass/layout/main" as l-main;
@use "./sass/layout/footer" as l-footer;

//./object/project
@use "./sass/object/project/header" as p-header;