SASSとCOMPASSのインストール

Posted on by ore_new

sass

環境 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コードをブラウザ上から参照することができる。

参考

CSSの常識が変わる！「Compass」の基礎から応用まで！ | 株式会社LIG –

ブラウザでデバッグする時もSCSS（Sass）を使う | FUBUKI とらのあな