既存プロジェクトにCompassが導入されている場合に備えて、最低限Sassのコンパイルだけでも行えるようにしておく

Sassのコンパイルはgulpを使用する事が多いのですが、自分以外が制作した昔のコードを触る時に、Compassというものが使用されている時があります。
がっつりコードを触る場合はgulpの設定からした方がいいのかもしれませんが、scssファイルにcompassが@importされている場合はなかなか面倒です。
少し書き換えるくらいなら、自分もCompassをインストールして使えるようにしておけば、すぐ対応できます。
というわけで今回はMacのCompassインストール方法と最低限の使い方についてまとめておきます。
ちなみに新規にCompassでのプロジェクト作成は2019年2月現在メジャーではありません。
あくまで既存のプロジェクトで使われている場合(「config.rb」ファイルがある場合)に使用することを前提としています。
Compassのインストール
gemのアップデート
まずはターミナルを開いて、gemのアップデートを行います。
$ gem update --system最新版が入っている場合は「Latest version currently installed. Aborting.」と返ってきますし、最新版じゃない場合はインストールが始まります。
ruby-sassのインストール
gemでSassのインストールをします。MacにはデフォルトでRubyが入っているので、すぐ導入が可能です。
$ sudo gem install sassMacログイン時のパスワードを聞かれるので入力してenterを押します。
バージョンを指定してインストール
もしバージョンを指定してインストールする場合は下記のコマンドでインストールします。
$ sudo gem install sass -v バージョンアップデートする場合
既にインストールしていて、アップデートがしたい場合は下記のコマンドを入力します。
$ sudo gem update sassCompassのインストール
いよいよCompassのインストールです。
$ sudo gem install compassCompassの使用
Compassの使用方法ですが、「config.rb」ファイルがあるディレクトリをターミナルで開いて下記コマンドを使用します。
$ compass watchファイルを更新すると自動でコンパイルされるようになります。
終了したい場合はcontrol + Cを押せば終了できます。
また、後ろにパスを指定すると特定のファイルを監視してコンパイルできるようになります。
$ compass watch ファイルパス
他にもいくつかコマンドがあったり「config.rb」での設定も色々ありますが、今回は最低限コンパイルできるようにする事が目的なので以上になります。


ターミナルでGitを使う時に最低限覚えておきたいコマンド
サーバーのアップロードファイルの最大容量の確認と変更方法
Nuxt.jsでaxios-moduleを使ってAPIからデータを取得・表示する|Nuxt.jsの基本
横幅が広がったときの挙動が変わる!CSS Gridの「auto-fill」と「auto-fit」の違い
WordPressのメディアライブラリで画像を追加するときに表示される「HTTP エラー」の解消方法
MacのRubyをrbenvで管理する方法
Visual Studio Codeでできる最低限のGit操作方法
JavaScriptのテンプレートリテラル内で条件分岐を行う方法
コーディング時に「アノテーションコメント」を使ってコードを見やすく管理する
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」