この記事は、3年前に書かれました。
はじめに
以前、Compassについての記事を書きました。
あれから数年、この業界は進歩が早く、特にフロントエンド周りは次から次と新しいものが出てきます。Compassも既に時代遅れとなっているようです。
さらに、@importは廃止予定です。@useと@forwardに置き換える必要あります。
そろそろ脱Compassしなきゃなーと考えていましたが、重い腰を上げてさよならすることに決めました。
Compass＋SublimeTextの代わりに使うものは
Compass＋SublimeTextの代替として使用するのはVSCodeです。
DreamweaverではなくVSCode（Visual Studio Code）でコーディングするコーダーさんも増えているのではないでしょうか。XAMPPやDockerと組み合わせてGoLiveでリアルタイムに確認できます。
私はバックエンドプログラムやReactも書きますのでVSCodeは日常で使用していますが、なぜかSASSで使用する気にはなりませんでした。特に理由はありません。
VSCodeでSASS（SCSS）を使用するにはLive Sass Compilerというプラグインを入れるだけです。プラグインを入れると、ウインドウ下のWatchSassをクリックすると、自動でコンパイルしてくれます。
このプラグインですが、2018年に一度開発終了となっていました。しかし、その後別の方が引き継いで開発を継続しているようです。
DartSASSへ書き換え
さて、環境を整えたあとは、古い案件のSASSをDartSASSへ書き換える作業です。
@importは廃止予定ですので、今のうちに@useと@forwardへ書き換えておく必要があります。
こうなっていた箇所を
@import "compass";
@import "mediascreen";
@import "mixin";このように置き換えます。当然compassはもう不要ですので削除します。
@use "mediascreen";
@use "mixin";しかし、@importは一度読み込めばどこでも使用できる仕様でしたが、@useはカプセル化されており、どこからでも読める仕様とはなっていません。
既存のSCSSファイルを全て修正するのは大変ですので、ひとまず個別のSCSSファイルに@useを追加する形で修正をおこないました。
@use "mediascreen";
@use "mixin";まとめ
脱Compassが遅すぎた気もしますが、フリーランスで一人作業だとなかなか新しいものを取り入れるのが難しいです。日々の作業に追われ、一度取り入れたものをそのまま惰性で使い続けてしまいます。
常にアンテナを張って新しい機能などを早め早めに取り入れていかなければなりませんね。