【Sass】とりあえずインストール

環境

OS: OS X 10.10.5

参考

Sass: Install Sass

1. rubyのインストール

Sassはrubyでコンパイルされるので、rubyのインストールが必要です。

が、Macの場合はrubyがプリインストールされてるので、特にすることはないです。

2. Sassのインストール

gemでインストールします

※gemって？
Rubyのrvmやgemってなんだ？て調べたらrbenvが出てきたの巻 - むかぁ～どっとこむ

Rubyに本体に付属して標準で入っている

ライブラリ・モジュール　(perlのCPAN,phpのpear,MSDNライブラリ？みたいな扱い )

gemコマンドを使って簡単にinstallやremove 等ができる。 (yum apt MacPortsみたいな)

コンソール開いて、「gem install sass」と叩くだけ

$ gem install sass
Fetching: sass-3.4.21.gem (100%)
ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.
$ sass -v

。。。と見せかけて、root権限必要でしたー

$ sudo gem install sas
Password:
$ sudo gem install sass
Password:
Fetching: sass-3.4.21.gem (100%)
Successfully installed sass-3.4.21
Parsing documentation for sass-3.4.21
Installing ri documentation for sass-3.4.21
1 gem installed

確認

$ sass -v
Sass 3.4.21 (Selective Steve)

おまけ. ちょっといじってみる

これだけだとあんまりなんで、少しSassをいじってみる。

細かいことは置いといて、公式のソースをコピペ。

Sass: Sass Basics

input.scss

// 変数
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

SCSS記法の場合は、拡張子は「scss」なんですね。。。
sassだと思い込んでて、３０秒くらいコンパイルエラーに悩まされました^^;

コンパイル

$ sass input.scss output.css
#確認
$ ls
input.scss  output.css  output.css.map

output.cssとoutput.css.mapが出力されました！
output.css.mapの方はソースファイルとのマッピング情報を持っているみたいです。

output.cssはこんな感じ

body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

/*# sourceMappingURL=output.css.map */

ちなみに「sass --watch 監視対象ファイル（ディレクトリ）」と叩くとファイルの変更を検知してコンパイルしてくれます

$ sass --watch input.scss:output.css #ファイルの場合、{ソースファイル:出力ファイル名}で出力ファイル名の指定ができる
>>> Sass is watching for changes. Press Ctrl-C to stop.
[Listen warning]:
  Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback.
>>> Change detected to: input.scss
      write output.css
      write output.css.map