WebDesigner's Memorandumウェブデザイナーの備忘録

既存プロジェクトにCompassが導入されている場合に備えて、最低限Sassのコンパイルだけでも行えるようにしておく

compass

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 sass

Macログイン時のパスワードを聞かれるので入力してenterを押します。

バージョンを指定してインストール

もしバージョンを指定してインストールする場合は下記のコマンドでインストールします。

$ sudo gem install sass -v バージョン

アップデートする場合

既にインストールしていて、アップデートがしたい場合は下記のコマンドを入力します。

$ sudo gem update sass

Compassのインストール

いよいよCompassのインストールです。

$ sudo gem install compass

Compassの使用

Compassの使用方法ですが、「config.rb」ファイルがあるディレクトリをターミナルで開いて下記コマンドを使用します。

$ compass watch

ファイルを更新すると自動でコンパイルされるようになります。
終了したい場合はcontrol + Cを押せば終了できます。

また、後ろにパスを指定すると特定のファイルを監視してコンパイルできるようになります。

$ compass watch ファイルパス

他にもいくつかコマンドがあったり「config.rb」での設定も色々ありますが、今回は最低限コンパイルできるようにする事が目的なので以上になります。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね