Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

  • あとで読みたい人は…

本日が決算日の@cappeeです。

Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説!

ついにたどり着いてしまったかもしれません。

今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。(そこまでまだ使いこなしてないので、正しくは「できそうです」。)

せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。

導入のキッカケ

話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。

私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。

Sassの使用にはRubyをパソコンにインストールする必要があったので、まずはそういった煩わしいことをせずに導入できる「Scout」というGUIツールを使ってSassをCSSに変換するコンパイルをしてみます。

ほうほうこれは思いのほか簡単に導入できたしいいぞと。

しかしDreamweaverでコーディングしようと思った時に、SCSSで書いてもアップロードするのはCSSなわけなのでいちいちCSSを選択してPUTするのは結構面倒だな。

ということでSCSSファイルを保存したらCSSが自動でアップロードできないか調べてみると、話題のSublime Text 2はできちゃうんですね。さすが。

DreamweaverのコードカラーもSublime Text 2と同じにしていた私なのでこれは「時が来た」と思ったわけです。(カラーコードかえるくらいならもっと早く乗り換えろよってね)

Sass(サス)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

CSSを生成するためのメタ言語で、シンプルな入れ子構造、Mixinsという複数定義が可能、さらに変数や演算などを使えるので、Sass(SCSS)からCSSを生成することで効率よくコーディングすることができます。

SassにはSASSとSCSS、二種類の記述方法があって一般的にはSCSSが使われています。

SCSSはCSSと記述が似ていますが、SASSは{}や;(セミコロン)をつけないインデントを使った階層になっています。一見シンプルそうですが、CSSへの慣れと見やすさなどからSCSSの方が人気のようです。

こちらに参考記事がまとまっています。
初めてSassとCompassを使った際に参考にした記事まとめ

Compass(コンパス)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

Sassを使ったフレームワークで、接頭辞(ベンダープレフィックスの)ついたCSS3のプロパティなどを簡単に挿入することができます。
CSS Spriteも書き出してくれるので、使うこなせばかなりのスピードアップになりそうです。

SassとCompassについてはこちらに詳しく書かれています。
CSSの常識が変わる!「Compass」、基礎から応用まで!

Emmet(エメット)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

Zen-Codingの次期バージョンの名前です。Emmetにかわると知った時はわりと衝撃でした。
名前が変わるくらい便利になったところは、新しく追加された「Fuzzy search」機能ではないでしょうか。
これにより決まった記述ではなく、クラス名からなんとなく推測される文字で展開しても理解してくれるようになったのです。

Emmetの記述方法や新しい機能などはこちらに詳しく書かれています。
CSSの記述を高速化する、Emmet (Zen-Coding)

Sublime Text 2(サブライムテキスト2)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

非常に高性能なテキストエディタです。テキストエディタなのでDreamweaverのデザインビューを活用してコーディングしている人はちょっとハードルが高いかもしれません。
無償でダウンロードできるので、検討するのにとことん使いたおしてから購入することができるのも魅力の一つです。

こ~いしちゃったんだ~♪
”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド!

Sass+Compassをとりあえず簡単に導入してみたい方は

Scout

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

何も考えずにScoutというSass(SCSS)からCSSをコンパイルできるGUIツールをインストールすればすぐに使うことができます。
通常コマンドなどを使うのですが、GUI(グラフィカルユーザインタフェース)だとデザイナーでも直感的に操作できるのでとっつきやすいです。
ただし、Scoutはディレクトリに日本語があると動作しないなどもあるようなので注意してください。

こちらに設定方法などが書かれていますので参考にしてみてください。
【Sassを覚えよう!Vol.3】一番カンタンな環境構築(Scout編)

Koala

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

最近リリースされたばかりのデザインがイケてる上記と同じコンパイラのGUIツールです。
Rubyをインストールする一手間はありますが、とても簡単なのでレッツトライ。
ディレクトリに日本語が使えるなどScoutより柔軟で、インターフェース的にも使いやすいと思います。

設定方法はこちらをご覧ください。
scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。

最強タッグを導入してみよう!

Sublime Text 2 + Sass + Compassのインストール手順

こちらにわかりやすく記述されていますのでインストール手順を参考にしてみてください。
コーダー必見、SCSS・Compassで開発効率アップ|Sublime Text 2でコンパイル編

プロジェクトの保存ですが、「Project > Save Project As…」で選ぶ場所はconfig.rbが設置されたルートディレクトリを設定しないとうまくコンパイルできませんでした。
また、プロジェクトのルートディレクトリに日本語(全角)があるとコンパイル出来ないのでご注意ください。

エラーがでた時の対処法

もしSCSSをビルドした時にエラーがでたら、エンコードの問題かもしれません。

ConvertToUTF8」というパッケージをインストールしてください。Sublime Text 2はデフォルトだとUTF-8にしか対応してませんので、ShiftJIS、EUC-JPにも対応できるようになります。
また、日本語のインライン入力に対応させる「IMESupport」もインストールしておきましょう。

下記の「その1」と「その3」を参考にしてください。
「Sublime Text 2」(Windows版)でまずやる2つのこと

それでも、もし「Decode error – output not utf-8」というエラーが表示されたら、「Preferences > Browse Packages…」を選択し、「Compass」フォルダの「Compass.sublime-build」を開いて下記を追加してください。(最後の行に追加する場合は「,」は必要ありません)

"encoding": "cp932",

初期設定

Sublime Text 2の初期設定などはこちらが参考になります。
Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ

Zen-Cordingのパッケージは、現在「Emmet」という名前に変更されてますので、新しい名前で検索してください。

ちなみに私はテーマを「Phoenix」にしています!

プロジェクト管理など便利な機能についてはこちら。
Sublime Text 2とEmmetで制作効率アップ!

Windows版のショートカットキーはこちらが参考になります。
Sublime Text 2のショートカットキーで便利なやつ何個か(Windows版)

メニューを日本語化

すべて英語表記なので日本語にしたいという方は下記ブログのコメント欄に最新バージョンが配布されています。
【Windowsアプリケーション】Sublime Text 2 メニュー日本語化

FTPの設定でCSSファイルを自動アップロード

私がDreamweaverからSublime Text 2に移行した一番の理由です。
CSSファイルだけでなく、すべてのファイルが保存と同時にアップロードできるのでとても楽です。
ただし本番環境の場合は手軽さが仇となる時もあると思うので考えてから設定する必要がありますね。

私と同じ壁にぶちあたった方がインストール方法など記事を書いています。
一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTP(FTP)で作業効率化する方法。

これで最強のタッグを手に入れることができました!

Sassの本がでましたよー!読みましたがかなりオススメです!

Pocket
article clipper Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

5 thoughts on “Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

  1. Pingback: Dreamweaverを卒業したのでSublime Textを使ってみた | webdesign | wordxx

  2. Pingback: Sublime Text 2 + Sass + Compass + Emmet を思い出す | deadwood

  3. Pingback: これだけ読んでおけば間違いなし!「Sublime Text 3」の導入時に参考になったサイトまとめ | Oh-Blog

  4. Pingback: 【最強説】Sublime Text 2 + Sass + Compass + Emmet 導入方法と自動アップロードの設定まとめ | Cappee Design | プロのウェブ制作者になるためのウェブサイト

  5. Pingback: [Emmet] 無料エディタ | さとういちろうのへや

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)