環境 MAC OS 10.11 El Capitan
SASSのインストール
コマンド+Uを押してターミナルを起動し、以下のコードを打ち込む。
sudo gem install -n /usr/local/bin sas
そして以下も様にインストールが始まる。
$ sudo gem install -n /usr/local/bin sass Password: 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)
Koalaインストール
Koala – a gui application for LESS, Sass, Compass and CoffeeScript compilation.
GUIをインストールする。設定は「自動コンパイル」「CompassMode」。 以下で行う.SCSSを作成してから設定する。
COMPASSインストール
SASSの機能拡張であるCOMPASSをインストール
$ sudo gem install -n /usr/local/bin compass
だらだら文字が流れてきたら成功。
‘compass create AAA’
と打つとAAフォルダができる。
AAAフォルダのconfig.rbに
http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "img" javascripts_dir = "javascripts"
を記入する。（自分の環境によって変える）
.SCSSに
@import "compass"; を記入する。
Chrome FirefoxでSASSを検証できる様に
- config.rbを開いて
sourcemap = truesourcemap = (environment == :production) ? false : trueを追加する。 - charomeのアドレスバーで
chrome://flagを入力。
s
Enable Developer Tools experimentsを探して、オンにする。「experiments」で検索。 - Chrome ブラウザ開発版をインストールする。
- 以上でSASSコードをブラウザ上から参照することができる。