Sublime Text のみで Sass / Scss をコンパイルする最もシンプルな方法

Sublime Textは軽量で高速なエディターですが、最近登場したような後発組である
Visual Studio Codeなどに比べると初期状態での機能は少なくプラグインを必要とします。

SASS / SUSSの構文もカラーで表示することは出来ませんし
SASS / SCSSをコンパイルすることもできません。

SASS / SCSSのコンパイルですが、
少し前まではcompassを利用している人が多かったと思いますが、
compassは若干、コンパイル速度が遅いため2018年になろうという今はcompassを利用している人は少ないと思います。

本記事ではGulpなどのタスクランナーを利用するほどでもないという場合の
Sublime TextのみでSASS / SCSSのコンパイルを行う方法を記載します。

準備

Windowsの場合にはRubyをインストールする必要があります。
Rubyのインストールはこちらから。

OSXやLinuxの場合には最初からRubyが含まれているので何も行う必要はありません。

パッケージのインストール

Sublime Textで Ctrl + Shift + P (Macの場合は Command + Shift + P)でコマンドパレットを開きます。

「install」と入力すると以下のように「install Package」が表示されるのでEnterキーで選択します。
Sublime textコマンドパレット

インストール可能なパッケージのリストが表示されるので
「Sass Build」と入力しEnterキーでインストールが開始されます。
Sublime Textコマンドパレット プラグイン Sass Build

パッケージをインストルするとナビゲーションバーの Tools > Build System に
「SASS – Compressed」と「SASS」が追加されています。
Sublime Text Build System

「SASS – Compressed」は整形された読みやすいCSSでビルドされます。
「SASS」は圧縮された軽量なCSSでビルドされます。
開発時に「SASS」でも良いですがリリース時には
「SASS – Compressed」にすることで高速化が見込めます。

ナビゲーションバーのToolsの「Save All on Build」にチェックを入れると
SASS /SCSSファイルを保存する度に自動的にCSSにビルドしてくれます。

ビルドはSASS / SCSSと同じフォルダに出力されます。
SASS Build後のファイル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です