LoginSignup
43
45

More than 5 years have passed since last update.

MacでSCSSを使うための手順(Sass+Compass)

Last updated at Posted at 2013-09-02

MacでSCSSを使うには、以下の手順で準備します。

  1. Sass+Compassのインストール
  2. フォルダ/ファイルの準備
  3. 自動コンパイルの起動

手順

1. Sass+Compassのインストール

Sassのインストール

まず、Sassをインストールします。
gem install 〜でインストールして、〜 -vでインストールされたかどうか確認します。

$ gem install sass
$ sass -v

install時に管理権限が必要な場合は、以下のようにsudoコマンドを用います。

$ sudo gem install sass

Compassのインストール

上記と同じ要領でCompassもインストールします。

$ gem install compass
$ compass -v

2. フォルダ/ファイルの準備

フォルダ構成の準備

あとは、SCSSを使うために各種ファイルを準備するだけです。
以下のような構造を準備します。

css /
scss /
  main.css.scss
config.rb

例えば、scssディレクトリにmain.css.scssという名前でSCSSファイルを作ると、cssフォルダにmain.cssというCSSファイルが自動で生成されるようになります。

config.rbの設定

config.rbには、以下のように記述してください。

http_path = "/"                   
css_dir = "css"
sass_dir = "scss"

3. 自動コンパイルの起動

上記だけでは、まだなにも起こりません。
SCSSファイルをCSSファイルに自動でコンパイルするには、config.rbがあるディレクトリで以下のコマンドを実行してください。

$ compass w

ちなみに、SCSSフォルダの中が空っぽだと、以下のように出力されます。
この場合は、SCSSファイルを作成してもう一度実行してみてください。

Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.

おわりに

以上でSCSSを使う準備が完了しました。
例えば、main.css.scssに以下のように書いてみてください。

a {
    &:hover {
        text-decoration: none;
    }
}

これを保存すると、以下の内容を持ったmain.cssが自動で作成されます。

/* line 2, ../scss/main.css.scss */
a:hover {
  text-decoration: none;
}

追伸:

フォルダ/ファイルは、以下のコマンドで自動で生成してくれます。
……が、上記では必要最小限の構成で説明するために手動で作成しました。
必要に応じて使い分ければよいと思います。

$ compass create

追伸2:

やっぱりrails便利(*´∀`)

参考ページ

43
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
43
45