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

Emmetで複数のタグを一括展開して、コーディングスピードをさらに上げる方法
Nuxt.jsでaxios-moduleを使ってAPIからデータを取得・表示する|Nuxt.jsの基本
SourceTreeで環境設定の「カスタムアクション」「アップデート」「高度な設定」が選択できない
「Dart Sass」「LibSass」「Ruby Sass」などSassの種類や記法に関するまとめ
Nuxt.jsでページを作成・追加する方法|Nuxt.jsの基本
WordPressのカスタム投稿タイプを追加後、ページは存在しているはずなのに404になる場合の解決方法
Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」
CodeAnywhereでターミナルに触る練習をする
Mac向けのミニマルでお洒落なデザインのGitクライアント「Gitfox」
MacのRubyをrbenvで管理する方法
Keynoteで有効にしているはずのフォントが表示されない現象
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
HTTP/2が設定されているはずなのに、ブラウザ上でHTTP/1.1になってしまう場合はセキュリティソフトを確認
複数サービスを1つのアプリで管理できるStationの通知設定
どちらの表記がより一般的なのか? /「ウインドウ」と「ウィンドウ」/「バイオリン」と「ヴァイオリン」/「バーチャル」と「ヴァーチャル」
Vue CLIのプロジェクト管理用のGUI機能から環境を構築する
Alfredの設定画面でショートカットキーが認識されない場合はKeyboard Maestroの設定を確認しよう
Gmailのラベルとフィルタ機能を使ってメールを自動的に振り分ける
Visual Studio CodeでIllustratorのスクリプトを書く時に便利な拡張機能「ExtendScript Debugger」
効率的に作業をこなしていくための時間術「ポモドーロテクニック」とは?
CSS Nite in Kobe, vol.51「すべての人がカメラを持つ時代の SNS映え・ウェブ映えする写真撮影テクニック と 写真撮影の基礎」に参加してきました
Hazelを使ってMacのファイル整理を自動化する