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

サーバーのアップロードファイルの最大容量の確認と変更方法
横幅が広がったときの挙動が変わる!CSS Gridの「auto-fill」と「auto-fit」の違い
Google Maps APIを使ってGoogle Mapsをウェブサイトに表示させる方法
Visual Studio Codeの文字サイズやタブサイズの設定方法
SourceTreeのカスタムアクションを使って差分ファイルだけをまとめる方法
Visual Studio CodeでDart Sassのコンパイルができる拡張機能「DartJS Sass Compiler and Sass Watcher」
様々な作業を自動化するgulpの基礎と導入方法
MacでCLIツールをインストールするときに行うターミナルでの「パスを通す」とは一体なにか?
Emmetで複数のタグを一括展開して、コーディングスピードをさらに上げる方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Ulyssesで複数シートをまとめてグループ化したり、1つのシートに結合する
Google検索で使えるパラメータ一覧とその活用方法
MacWinZipperでWindowsでも文字化けしないZipフォルダの作り方
Marpで既存Markdownファイルを使ったスライド作成時に、見出しごとにスライドを分割する方法
知っていると作業が少しラクになるMacの豆知識 #1日1Tips – 2019年12月
Ulysses編集画面の画像プレビューが小さすぎる場合の対処法
【前編】もうライティングで困らない!説得型ランディングページとアフィリエイター活用で売り上げアップ【CSS Nite in Kobe】
Dart Sassでファイルを分割して管理する方法|Dart Sass入門
Visual Studio Codeで連番を入力する拡張機能「vscode-input-sequence」