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

MacOSX(10.9) + Sublime Text 3 + Compass 環境を作る

More than 5 years have passed since last update.

備忘録です.
Sublime Text 3, Package Controll は導入済みを仮定してます.

環境

  • MacOSX 10.9
  • Sublime Text 3
  • Sass 3.2.19
  • Compass 0.12.6
  • rbenv 環境です.

Sass, Compass のインストール

Sass, Compass をインストールする前にRuby Gems のアップデートを行います.
sudo gem update --system

無事終わったらCompassをインストールします.
ちなみに,Compassをインストールする際Sassは一緒にインストールされます.
sudo gem install compass
rbenv rehash

一応動作確認もします.
sass -v
compass -v

Sublime Text 3 へパッケージの追加

Sublime Text 3 から.scssファイルをコンパイルするための準備をします.
Command + Shift + p + install + 以下

  • Sass
  • SASS Build
  • Scss
  • Compass

ちゃんと入ったかどうかは,Command + Shift + p + List Package で確認できます.

次にCompassのビルド設定ファイルにMacOSX用のPathを追記します.
Command + Shift + p + List Package + Compass を選択します.
Finderが開くので,Compass/Compass.sublime-buildを探して以下を追記します.
"osx" {"path": "/usr/local/bin:/Users/username/.rbenv/shims:$PATH" }

コンパイルしてみる

まず,任意の場所で適当にディレクトリを作成します.今回はsampleにします.
次にsample以下にsassディレクトリとCompassの設定ファイルを作成します.
設定ファイルは真似して書いちゃえばいいです.

config.rb
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
output_style = "expanded"

Sublime Text 3に戻ってProject -> Save Project As...
先ほど作成したsample以下を指定してプロジェクトを作成します.

適当にscssファイルを作成してsample/sass以下に保存します.

style.scss
@import "compass"

div {
  width: 200px;
}

最後に,Command + b でコンパイルをします.
sample/css以下にstyle.cssというファイルが生成されていればおしまいです.

ひとこと

誰かがさっき歌ってたSOS!!が,頭の中でCSS!!CSS!!ほらほら呼んでいるよ〜に置き換わってループしててこわたん

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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