既存プロジェクトに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」での設定も色々ありますが、今回は最低限コンパイルできるようにする事が目的なので以上になります。

コーディング時のclass名の省略はどこまでして良いのか?「img / btn / ttl / desc / thumb」
Gitで最初に設定しておくユーザー名とメールアドレスのグローバル設定
ウェブサイト上で簡単にWYSIWYGエディタを実装する「TinyMCE」
Vue.jsで値段を表示するときに3桁ごとにカンマを入れる方法
HTMLが書ければすぐ習得できるテンプレートエンジン「EJS」の基本的な書き方
iOS Safariで指定したフォントサイズにならない場合の対処法
WordPressのメディアライブラリで画像を追加するときに表示される「HTTP エラー」の解消方法
Visual Studio Codeとスニペット・ドキュメント検索アプリの「Dash」連携を行うプラグイン
goenvを使って、MacにGo言語をインストールする
Visual Studio Codeの「Debugger for Chrome」でJavaScriptのデバッグを行う
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
1つのノートアプリにすべて集約するのをやめた理由|2025年時点のノートアプリの使い分け
Notionログイン時の「マジックリンク」「ログインコード」をやめて普通のパスワードを使う
AlfredでNotion内の検索ができるようになるワークフロー「Notion Search」
Gitで1行しか変更していないはずのに全行変更した判定になってしまう
Macでアプリごとに音量を調節できるアプリ「Background Music」
Macのターミナルでパスワード付きのZIPファイルを作成する方法
MacBook Proでディスプレイのサイズ調整をして作業スペースを広げる
SteerMouseの「自動移動」機能で保存ダイアログが表示されたら自動でデフォルトボタンへカーソルを移動させる
iPhoneでタッチが一切効かなくなった場合に強制再起動する方法