M1 MacにCompass導入してみた

なしょ｜Webデザイナー

とある事情でSublimeTextでSCSSをコンパイルするためにCompassを導入することになり、基本的にはこちらを見本に進めていきましたが、なかなかうまくいかず導入までにかなり時間を要してしまったので、備忘録として手順を書いていきます。

今回使用したMacは
M1 Macbook Air（2020）
MacOS Sonoma 14.2.1（23C71）
といった環境です


ターミナルでSassとCompassをインストール

下記を参考サイトのとおり一行ずつターミナルで実行していけば、SassとCompassが入いります

gem本体のアップデート
sudo gem update --system

sassをインストール
sudo gem install -n /usr/local/bin sass

念のためインストールできているか確認（バージョンが表示されればOK）
sass -v

compassをインストール
sudo gem install -n /usr/local/bin compass

念のためインストールできているか確認（バージョンが表示されればOK）
compass -v

そのはずが1行目の時点で下記のようなエラーが出てしまい、インストールに失敗してしましました。

ERROR: While executing gem ... (Gem::FilePermissionError)

調べてみると、権限が不足していてgemのインストールができないようで、原因はMacの場合、最初からシステムにRubyが入っていて、デフォルトでシステムのRubyを使うようになっているらしいんですが、そのRubyを使うには管理者権限がないとダメらしいです。

その管理者権限をパスワード入力によってパスするコードが上記にも含まれている「sudo」らしいんですが、なぜか今回これでもERRORが出てしまっていました。

やり方としては主に以下の2種類で

  1. 自分のアカウントに管理者権限を付与する

  2. rbenv経由で外部のRubyを使うようにする

があるようですが、1の方法はなんでもできすぎてMac自体の操作ができなくなってしまうことがあるそうで、かなりリスクが伴うので今回は、2のrbenvを使う方法で進めていきます。

rbenvとはRubyのバージョン管理するツールで、後ほど記述しますが、今回の目的であるCompassは古いバージョンのRubyが必要になるので、こちらを使う方が都合いいかもしれません。

rbenv経由でRubyをインストールする

今回は下記サイトを参考にrbenvを使ってRubyをインストールしていきます

rbenvをインストールにはHomebrewが必要なので、あらかじめ準備しておいてください。（他でもよく使うので入れておくと便利）

上記サイトに沿ってrubyをインストールできたら、再度冒頭の参考サイトの手順に則って、SassとCompassをインストールします。
下記をターミナルで実行してSassとCompassのバージョンが表示されれば成功です。

sass -v
compass -v

Sublime Textをインストール

まずはSublime Textをこちらからダウンロードします。
（2024年3月時点で最新版はSublime Text 4になります。）

Package Controlをインストールする

Sublime Textがインストールできたら、定番のセットアップであるPackage Controlのインストールを行います。（日本語化も併せて行うといいと思います！）
Command+Shift+Pでコマンドパレットを呼び出して「install」と打つと検索候補に「Packege Controll:Install Package」と出てくるので選択すればOK！

…のはずが出てきませんでした。（上記で完了するなら次に行ってOK）
よく見ると、日本語化していないはずなのにメニューバーが日本語になっていたので、過去にSublime Textを使っていた名残があったのでしょう。
じゃあこの手順はスキップできるかと思って以下に説明する手順に進もうとしてもコマンドパレットがちっとも機能しません。

調べるとSublime Textは一度インストールしたプラグインはアプリ本体とは別の場所に保存され、アプリ自体を削除してもプラグインは残るようです。
試しにSublime Text 3をインストールしてみましたが、結果は同じくPackage Controlが機能しませんでした。アプリケーションを削除してしばらく経つので何か不具合が起きているのかもしれません。
いっそ綺麗さっぱりアンインストールするしかないと思い、AppCleanerを使用してみることにしました。
AppCleanerでSublime Textをアンインストールした後に再度インストールすると、表示が英語になっていたので綺麗な状態でインストールできたと思います。

改めて、Command+Shift+Pでコマンドパレットを呼び出して「install」と打ち込むと「Packege Controll:Install Package」と候補に出てきて、インストールも成功して一安心でした。
あわせて日本語化もしておきましょう。

最後に

M1チップを含むApple Siliconは他のWin機や古いMacとはまた異なる仕様のようで、Compass自体が古いシステムになるので出てくる記事がApple Siliconに対応していないものが多く、記事通りに手順を踏んでインストールしようとしても上手くいかないことが多々あるようです。
今回のSASS・Compassに限らず似たようなことは起こりうるので参考文献の探し方には注意が必要なようです。

いいなと思ったら応援しよう！