Sublimetext3にSassとCompassを導入してみた。
おはよーグルト♪PS4が欲しくてたまらない団長ですヾ(´ω｀＝´ω｀)ﾉ ｵﾊﾖォ
アルファブロガーめざして頑張ります！
そもそもSassってなんだかよく分からなかったのですが、業界界隈では便利だ！という声がたくさん上がっていたのでとりま団長も頑張って使えるようにしてみました。
正直なところSassをCompassでコンパイル出来るようになるまで洒落抜きにかなりつまづきました・・・
会社のMacOS 10.8.5ではCompassがすんなりインストールできなくて難しかったです、有益な情報を発信してるブロガーの皆様のおかげでなんとかインストールできた感じです。
忘備録も兼ねて、インストールまでつまづいたポイントなどを解説（書き殴りともいう）していきたいと思います。
（おまけ-プライベートのMacbookAir OS 10.10だとすんなりいったw それこそ設定を開始してから10分ほど・・・）
今回の記事の目的は、Sublimetext3でSassを編集し、自動でコンパイルされたcssが出力する、です。
実は自動というのは嘘なんですけど←
Sublimetextでショートカット1発で生成されるが正しいです。
GUIを使う方法もありますが、実際KoalaというSassをコンパイルしてくれるアプリを使ってみたらスマートじゃないのですね、効率的に。
出来るには出来る、けど1回別のアプリケーション噛まさないといけないってのが引っかかりました。
SublimetextでSass書いてるんだからそのまま直で投げれた方が憧れた。
目次
Sassとは？
ざっくりいうとCSSのパワーアップ版でしょうか。
通常のCSSの記述方法ももちろんそのまま使用できますが、
加えて変数や関数、CSSクラスの入れ子構造（ネスト）なども使用できるすごい。
格安イラスト制作ならEagleGraohics（イーグルグラフィクス）
Compassとは？
SASSをもとにかかれたフレームワークの事。
Sassのインストール
まずはmacにプリインストールされてるrubyのアップデートをします
ターミナルより
|
1 |
sudo gem update --system |
次にSassをインストールします
ターミナルより
|
1 |
sudo gem install sass |
正常にインストールされたかバージョンチェックを利用して確認します
|
1 |
sass -v |
入力後rubyのバージョンが表示されれば無事にインストール出来ています。
Compassのインストール
ターミナルより
|
1 |
sudo gem install compass |
出来ました？
エラーメッセージが出てインストール出来ない人いませんか?
インストールできたっぽい人はチェックしましよう!
|
1 |
compass -v |
Compassインストールできません・・・
エラーが出た人アンラッキー。
団長も出ました（汗）
結果的には手探りで試行錯誤のしていて出来たんですよ！
ターミナルなんて半年に1回触るか触らないかの人間にもかかわらず！
エラーが出た人は下記を参照してみて下さい。
【Mac】SassとCompassをインストール！エラー克服版！
上記の神ブログによればCommand Line Developer ToolsをインストールすればCompassインストール出来ちゃうよとの事。いや〜有り難い！
何度も参考にさせて頂きました。
https://developer.apple.com/downloads/
まずここから自分のOSにあったバージョンのCommand Line Developer Toolsをダウンロードする。
※ダウンロードするにはApple IDが必要です。
ちなみに団長はMacOS 10.8.5なので
command_line_tools_os_x_mountain_lion_for_xcode__october_2013をダウンロード&インストール。
さらに色々試していたのでついでにxcode_5.1.1も同様にダウンロード&インストールしちゃいました。
xcodeも必要なのかどうかはちょっとわからない、なぜなら同時期にインストールしてしまったから。
先にcommand_line_tools入れて駄目ならxcodeもインストールしてみると良いかもです。
ただcommand_line_tools_os_x_mountain_lion_for_xcodeと書いてありますから、何となくxcodeも必要じゃね？と勘ぐれますけど。
売上100万円？？！！最安49800円のLINEスタンプ製作！！
もう一度Compassのインストールを試す。
おらぁ
|
1 |
sudo gem install compass |
|
1 |
compass -v |
出来ました・・・？
出来ない人がいたら土下座します・・・orz
生まれて来てすみません。
団長はこれでインストール出来ましたm( . _ . )m
Sublimetext3の設定
SassとCompassをインストールしただけでは終わりではなく、
Sublimetext側にも必要なパッケージインストールしてなおかつ、内部ファイルの記述を書き換える必要があります。
sublimetext3を起動して
cmd+shift+p → Packege Install を選択
下記を順番にインストールする
Sass
SASS Build
Scss
Compass
次に
cmd+shift+p → List Packeges を選択
compassをクリック
するとFinderでConpassのシステムファイルが見れます。
Compass.sublime-buildのファイルを開き
下記を2行目あたりに追加します。
|
1 |
"osx" {"path": "/usr/local/bin:/Users/username/.rbenv/shims:$PATH" }, |
以上でSublimetextの設定は終わりです。
実際にSublimetext3でコンパイルしてみる
ここでまたコンパイルするための準備が必要です。
config.rbというものが必要で、このconfig.rbの中にCompassの設定を記述する必要があります。
sublimeでconfig.rbという名前のファイル作成をして、下記を記述してください。
|
1 2 3 4 5 |
http_path = "/" css_dir = "css" sass_dir = "sass" output_style = :expanded line_comments = false |
そして作成したconfig.rbの置くディレクトリですがここでは下記の通りにしてください。
実際運用する際などはconfig.rbの設定を変更しルートを各々設定してあげるのが良いと思います。
root
├ config.rb
├ cssフォルダ
└ sassフォルダ
└ style.scss ←これを編集する
試しに入れ子構造で作成したSassファイル（style.scss）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.box{ width: 300px; .box-nest{ width: 100px; a{ color: green; } a:hover{ color:yellow; } } } |
cmd+bを押すと即座にSassファイル（style.scss）がコンパイルされます。
root
├ config.rb
├ cssフォルダ
│ └ style.css ←コンパイルされたcssが出来た!
└ sassフォルダ
└ style.scss
出力結果
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.box { width: 300px; } .box .box-nest { width: 100px; } .box .box-nest a { color: green; } .box .box-nest a:hover { color: yellow; } |
今回はとりあえずコンパイル方法だけで・・・・
使い方は日々勉強中なのです
ノシ
