macOS Mojave や Catalina で compass を動かす方法を紹介

macOS Mojave や Catalina で compass を動かす方法を紹介します。
例えば、Mojave にアップデートしたら、今まで使えていた compass が動かなくなった時に有効な方法です。

  1. Sass と Compass のインストールと gem の update
    1. Sass のインストール
    2. gem の update
    3. Compass のインストール
  2. Compass のインストールが失敗 Command Line Tools for Xcode をインストール
    1. Command Line Tools (macOS 10.14) for Xcode 10 のインストール方法
    2. ターミナルから xcode をインストールする方法
  3. 改めて Compass のインストール!…しかし
  4. だけどコンパイルすると warning が…

Sass と Compass のインストールと gem の update

まずは Sass と Compass をインストールします。
インストールにはターミナルを使用するので、
「アプリケーション」>「ユーティリティー」>「ターミナル」 を選択してターミナルを起動します。
※ Mac ではデフォルトで Ruby が入っているので、Ruby が入っていることを前提に話を進めます。

Sass のインストール

最初に Sass をインストールします。
ターミナルが起動したら次のコマンドを実行します。

sudo gem install sass

もしここでパスワードを聞かれた場合は、ユーザーのパスワードを入力します。
Sass が無事にインストールされたかを確認する場合は、次のコードを実行します。

sass -v

実行後に次のような表示が出れば成功です。

「Sass 3.X.X (Selective Steve)」

仮に、Sass がインストール済みで Sass をアップデートする場合は次のコードを実行します。

sudo gem update sass

sudoって何?

コマンドの最初に記す「sudo」は、管理者権限で実行するコマンドです。上記でユーザーパスワードを聞かれるのはそのためで、使用の際には管理者(ユーザー)パスワードの入力が必要になります。

gem の update

次に gem の update をします。
ターミナルで次のコマンドを実行します。

sudo gem update --system

すでにアップデート済みなら次のようなコメントが表示されます。

「Latest version already installed. Done.(最新バージョンは既にインストールされています。 完了しました。)」

Compass のインストール

次に Compass をインストールします。
ターミナルで次のコマンドを実行します。

sudo gem install compass

ここでもパスワードを聞かれる場合は、ユーザーのパスワードを入力します。
Compass が無事にインストールされたかを確認する場合は、次のコードを実行します。

compass -v

インストールが失敗している場合は、次のようなコメントが表示されると思います。

「-bash: compass: command not found」

Compass のインストールが失敗 Command Line Tools for Xcodeをインストール

Compass のインストールに失敗した場合、macOS のアップデートにより Ruby のバーションが上がってしまったことが原因の可能性があります。
その場合は Command Line Tools for Xcode をインストールして対応します。

Command Line Tools (macOS 10.14) for Xcode 10 のインストール方法

Command Line Tools (macOS 10.14) for Xcode 10 のインストール方法を紹介します。
Xcode を起動して メニューの Xcode から > Open Developer Tool > More Developer Tools を選択。
するとブラウザーが起動して「More Downloads for Apple Developers」ページが表示されます。
ページのログインにはAppleIDが必要です。

カテゴリの Developer Tools から「Command Line Tools (macOS 10.14) for Xcode 10」をダウンロードしてインストールします。

ターミナルから xcode をインストールする方法

ターミナルからインストールする場合は次のコードを実行します。

sudo xcode-select --install

改めて Compass のインストール!…しかし

ここで改めて Compass のインストールを行います。
ターミナルで次のコマンドを実行します。

sudo gem install compass

すると、環境によっては次のようなエラーが表示されます。

「ERROR: While executing gem … (Gem::FilePermissionError)
You don’t have write permissions for the /usr/bin directory.」

どうやら保存先に問題があるようです。
そこで、ターミナルのコマンドを次のように変更します。

sudo gem install -n /usr/local/bin compass

これでうまくインストールが実行されたのではないでしょうか…。
最後に Compass が正しく動作しているかを確認して終了です。

だけどコンパイルすると warning が…

いざコンパイルしてみると warning が表示される。そんな時は Sass のアップデートにより「Sassの書式が変わった」などが原因かもしれません。アラートにエラー箇所の記載があれば、その箇所の最新の記載方法を調べてみましょう。

まとめ

macOS Mojave で compass を動かす方法を紹介しました。