Sassファイルをコンパイルする方法

最近npmの無い環境で開発する機会があり、Sassをnpmコマンド以外でコンパイルする方法を探したので、その内容をまとめました。

なぜコンパイルをするのか

そもそもなぜSassはコンパイルが必要なのか？

• そもそもSassはCSSを書きやすくするために作られた拡張言語
• ブラウザでsassを読み込むことはできない

ブラウザで読み込めるのはCSSのみです。なのでsass(scss)ファイルは一度コンパイルしてCSSファイルに変換する必要があります。

Sass公式: https://sass-lang.com/guide

Sassをコンパイルする方法

①ターミナルでsassコマンドを使う

sass sassファイルのパス cssを出力したいファイルパス

1つ目の方法はsassコマンドの実行です。第1引数にsassが書かれたファイルのパス・第2引数にcssを出力したいファイルパスを入れることで実行できます。そして、第3引数にオプションを追加することが可能です。

便利そうなオプション一覧

• --watch: sassファイルを監視して自動でコンパイルしてくれます。
• --no-source-map: このオプションが付いていると、CSSからsassファイルを辿りやすくしてくれるソースマップの生成をしなくなります
• --indented: 拡張子が.sassファイルの場合はこちらが必要です
• --style compressed: コンパイル後のCSSファイルからインデント・コメントなどを全て削除して、1行にまとめます。(コンパイル後のCSSファイルをいじらない場合はこちらがおすすめ)
  →デフォルトは--style expandedになっています。

sassコマンドについて: https://sass-lang.com/documentation/cli/dart-sass

②VSCodeの拡張機能「Live Sass Compiler」を使う

これが、めちゃくちゃ楽にコンパイルしてくれます。

使い方はインストールしたら、settings.jsonにこちらを追加するだけです。

"liveSassCompile.settings.formats": [
    {
      // --styleオプションと同じ
      "format": "expanded",
      // コンパイル後の拡張子
      "extensionName": ".css",
      // コンパイル後のファイルをどこに追加するのか
      "savePath": "/html/css"
    }
  ]

他の設定オプションはこちらから確認できます: https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

うまく動いていれば、VSCodeの下のバーにWatching...と表示されているはずです。

終わりに

sassコマンドとVSCodeの拡張機能について調べましたが、公式の情報が一番正確でまとまっていました。記事内に貼ったリンクも是非見てみてください。

SassはCSSを書く全ての人にとって素晴らしい発明なので、まだ使ったことのない方は是非使ってみてください。