WEB制作(html・css(スタイルシート))に関する各種メモ書き

Mac OSXへの SCSS, Compass簡単導入方法

●1. Xcodeをインストールする

●2. Command line Toolsをインストールする

(要apple developerアカウント) https://developer.apple.com/downloads/?name=for%20Xcode
から対応するOSXバージョンの「Command line Tools (OSX10.XX)for Xcode X.X」 をダウンロードしインストール

●3. SASS, Compass をインストールする

ターミナルから

sudo gem install sass
sudo gem update --system
sudo gem install compass

でインストールする。

インストールの確認は

sass -v
compass -v

●4. Sublime Text をインストールする

Sublime Textはシェアウェアですが、シェアウェア登録する前でも機能制限なく試すことができます(たまに保存時にダイアログが出るくらいです。) https://www.sublimetext.com

●5. Sublime Textの Package Controll をインストールする

https://packagecontrol.io/installation
に表示されるコードを
Sublime Textの【View】→【Show console】に入れて return を押すとインストール開始。
インストール完了後【Sublime Text】→【Preferences】→【Package Contol】がメニューにあればインストール成功

●5. Sublime Textのパッケージをインストールする

Command + Shift + p + install  「return」

で表示される画面から以下の4つのパッケージをインストールします。(インストール後は画面が元に戻るので再度 Command + Shift + p + install)

Sass
SASS Build
Scss
Compass
SublimeOnSaveBuild

インストール成功かどうかの確認は

Command + Shift + p + list  「return」

で表示される画面に全てのパッケージがあるかどうかで確認します。

●6. パスの追加

以下のファイルをSublime Text で開く

/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/Compass/Compass.sublime-build

開いたファイルはjsonファイルなので、一番最後の行の後ろにカンマ「,」をつけて以下の行を追加

    "osx" : {"path": "/usr/local/bin:/Users/【ユーザー名】/.rbenv/shims:$PATH" }

関連エントリー

No.1029
05/07 13:39

edit

css