Help us understand the problem. What is going on with this article?

Compass環境の構築

More than 5 years have passed since last update.

CompassSassがベースのフレームワークです。
利用するにはRubyが必要ですが、涙が出るほど便利過ぎるなので、CSSを扱うプロジェクト積極的に活用していきましょう。

Rubyのインストール

Compassを使うには、Rubyが必要ですのでインストールします。
rbenv + ruby-buildを使ってインストールすることをオススメします。

Macであれば、Rubyは標準でインストールされています。
このまま標準のRubyを用いてもいいですし、rbenvを使って最新のパッチレベルのものをインストールしてもいいでしょう。

bundlerのインストール

そのまま gem install compassしてしまうと、globalな環境にgemがインストールされてしまいます。
プロジェクトで使うgemはプロジェクト環境で閉じているのが望ましいので、パッケージ管理ツールであるbundlerをインストールし、個別のgemはbundlerで管理するようにします。

gem install bundler

rbenv環境ではなくsystem環境のRubyの場合は、sudo が必要かもしれません。

Gemfileの生成とCompassの追加

bundlerで管理するgemファイルは、Gemfileに記述します。
Gemfileは1から記述してもいいのですが、以下のコマンドでも雛形が生成できます。

cd PROJECT_DIR
bundle init

GemfileにCompassを追加します。

echo 'gem "compass", "~> 0.12.2"' >> Gemfile

出来上がったGemfileはこんな感じ。

# A sample Gemfile
source "https://rubygems.org"

# gem "rails"
gem "compass", "~> 0.12.2"

Compassのインストール

bundle installでGemfileに記述したパッケージをインストールします。
--pathを指定することで、vendor/bundle 以下にgemがインストールされます。

bundle install --path vendor/bundle

Compassの利用

後は、bundle execでcompassを実行するだけです。
実際の細かい使い方は本家を参照しましょう。

使い方を見るには、シンプルに。

bundle exec compass

いちいちbundle execを付けたくない場合は、インストール時に--binstubsを付けます。

bundle install --binstubs --path vendor/bundle

そうすることでカレントフォルダにbin/compassが生成されますので、PATHを通すなりなんなりで直接compassコマンドを叩けるようになります。

u-minor
sprocket
"Sprocket(スプロケット)は、Webサイトにおけるコンバージョン(購入・入会・資料請求・問合せ等)を増やしたい企業様向けに、自社開発のWeb接客ツールの導入及びコンバージョン改善コンサルティングを行っている会社です。 "
https://www.sprocket.bz/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away