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

Webデザイナーを目指す専門学生が技術ブログを書くメリット
JavaScriptで日付をコピーして計算すると、コピー元の日付も変わってしまう場合の対処法
ファビコンや各種アイコンの作成と設定方法
Vue.jsでtemplateタグ内にscriptやstyleタグを生成する方法|Tags with side effect are ignored
ブラウザでこれ以上スクロールできない場合の挙動を制御する「overscroll-behavior」プロパティ
「DevTools z-index」でz-indexがかかっている要素をChrome開発者ツールに一覧表示させる
Mac向けのミニマルでお洒落なデザインのGitクライアント「Gitfox」
Visual Studio CodeでSVGをプレビューする拡張機能「SVG Preview」
Vue.jsを使う人が最低限導入しておきたいVisual Studio Codeの拡張機能
gulp 4.0から新しく加わったseriesとparallelについての備忘録
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う
軽量で高速なターミナルエミュレーター「Ghostty」の設定方法
Eagleで実現するクリエイティブ素材の簡単管理
かゆいところに手が届く「Supercharge」でMac環境を便利にカスタマイズする
超軽量なコードエディタ 「Zed」をサブエディタとして活用する
Bartender 6で追加されたWidgets機能で自作メニューバーアイテムを簡単に作成する
Googleカレンダーを便利に活用するための小技集(祝日だけを表示・月末の繰り返しイベントを追加)
Obsidianを使った「自己流PKM」で行う知識トレーニング