[Sass & Compass] Sublime Text 2 + Sass + Compass + Emmet を思い出す
導入時にいろいろ確認した。そして忘れたオレひとのためのメモ。
[markdown]
## Sublime Text
### 初期設定
設定をいじったり、パッケージを導入したりしたはず。
何かの際にはこちらを読み直せば助かる。
> * [Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog](http://mnemoniqs.com/web/sublimetext2/)
> * [【追記】【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【&Vim化】【4日目】 ｜ Developers.IO](http://dev.classmethod.jp/tool/html-corder-sublime-text-2-customize/)
### 機能＆ショートカット
こちらのサイトで紹介されていたものから、STっぽいものやよく使いそうで忘れそうなものをピックアップ。
> * [Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog](http://mnemoniqs.com/web/sublimetext2/)
> * [”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！ | 株式会社LIG](http://liginc.co.jp/designer/archives/6774)
> * [1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選（Win、Mac両方） ｜ Developers.IO](http://dev.classmethod.jp/tool/sublime-text-2-shortcut/)
> * [Sublime Textの地味に便利なショートカット5つ | Webデザインのタネ](http://blog.1dz.jp/?eid=805)
ドットインストールを再確認してみるのもよさそう。
> * [Sublime Text 2入門 (全14回)](http://dotinstall.com/lessons/basic_sublimetext)
#### Goto Anything
Project内のファイル/関数/行番号を検索する。
command + P
デフォルトでは、ファイル名を検索して開くことができる。
* 「@」をいれると、methodを検索。
* 「:」をいれると、行番号で検索。
* 「\#」をいれると、ファイル内の文字列を検索。
ファイル名の後に、これらを組み合わせることもできる。
（例）index.css の400行目
“`
index.css:400
“`
#### 検索/置換/フォルダを指定して検索and置換
検索
command + F
置換
command + alt + F
フォルダを指定して検索and置換
command + shift + F
#### マルチセレクト
同じ単語を上から選択して編集可能状態にする
command + D
同じ単語をすべて選択して編集可能状態にする
command + control + G
#### セレクト
矩形選択
altを押しながら、ドラッグで選択。
括弧内を選択
control + shift + M
#### 行の操作
行の削除
control + shift + K
行の移動
command + control + ↑ (↓)
行のコピー
control + shift + D
#### 大文字、小文字変換
続けてコマンドを入力する。
大文字変換
command + K – command + U
小文字変換
command + K – command + L
## Emmet
command + shift + P でコマンドパレットを開き、package install からインストールする。
新しくなったようなので後で復習がてらやることにする。
> * [Emmet/Zen-coding入門 (全10回)](http://dotinstall.com/lessons/basic_emmet)
### キーバインド
Sublime Text だったりとぶつかるのでいろいろ調整が必要だった気がするんだけど、何を参照してどこを変えたのか、きれいに忘れてしまった。
> * [【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・上巻 ｜ Developers.IO](http://dev.classmethod.jp/tool/emmet-sublimetext2-1/)
> * [【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻 ｜ Developers.IO](http://dev.classmethod.jp/tool/sublime-text-2-emmet-coding-2/)
### Cheat Sheet
> * [Emmet Documentation – Cheat Sheet](http://docs.emmet.io/cheat-sheet/)
## Sass & Compass
“`
% gem update –system
% gem install sass
% gem install compass
“`
> * [【最強説】Sublime Text 2 + Sass + Compass + Emmet 導入方法と自動アップロードの設定まとめ | Cappee Design](http://cappee.net/coding/sublime-scss-compass-emmet)
> * [コーダー必見、SCSS・Compassで開発効率アップ｜Sublime Text 2でコンパイル編 ｜ Developers.IO](http://dev.classmethod.jp/tool/scss-compass-fast-development-for-sublime-text-2-compile/)
使い方は他の方法をとったので、別にまとめることにする。
[/markdown]