トランスビット
トランスビットの開発ノート Webサイト制作に役立つTipsやトラブルシューティングなどの備忘録

Sublime Text 3(Compass+sass)のある暮らし

様々なサイトで絶賛されている高機能エディタ、Sublime Text。
恋に落ちるエディタってすごい二つ名だなと思いますが、嘘じゃありません。

遅ればせながら一年ほど前、疑心暗鬼でRubyをインストールし、初めてSassのSCSS記法を使ったcssを書き始めた一時間後……爆速コーディングとSublime Textの拡張性の高さと安定っぷり(作業中に落ちないってほんと重要!)に衝撃を受け、私も漏れなくSublime Textとの恋に落ちました。

ちなみに、それまでコーディングにはDreamweaverとサクラエディタを使用。
サクラエディタは10年ほど使いました。これ、インストールは圧縮ファイルの展開のみなので、レジストリ汚染しません。
昔、他所に出向いて作業することが多々あったため、インストールフォルダそのものをコピーしてUSBメモリに入れておけば、どこにいっても自分好みにカスタマイズしてある高性能エディタを使えるというのは、非常にありがたかったです。
でも、今はもう他所での作業もないし、Sublime Text 3があるのでアンインストール済み。今までありがとうノシ

Sublime Textの特徴

Sublime Textの良いところ

  1. 動作が軽い
  2. 挙動が安定している
  3. パッケージ(プラグイン)が豊富
  4. コンパイルも簡単
  5. 作業管理(プロジェクト)ができる
  6. 前回開いていたプロジェクトとファイルを覚えてくれてるから、次回作業開始がスムーズ
  7. 使用制限がなく無料で使える

Sublime Textのイマイチなところ

  1. プレビュー機能がなく、プレビューから修正ができない
  2. sassの記述が増えてくると、Compassのコンパイルが遅い

本当は、Sublime TextとChromeにEmmet Live Styleを入れると、デベロッパーツールからcssの修正がDreamweaverライクにできるのですが、私はSassを使ってcss書いているので、直接Sassを修正できないと意味がありません。デベロッパーツールのベータ版使えばSassに対応可能とかそんな感じの記事を見て試したものの、どうにもうまくいかなかったので再挑戦予定です。

後は、Compassのコンパイルが遅いのをどうにかしたい……といっても、三分の一くらいは私のsassの書き方が悪いせいかも。
Sassを使い出してから、ネストでのセレクタ指定にやたら頼るようになり、cssが不細工になってきてます。
IE7やIE8への対応案件が減ってcss3で疑似クラスが使用可能になり、レスポンシブの案件が増え、スマホの時は~とか、タブレットではこうだから~とか考えながら書いてると、classの命名にまで頭が回らず、「あーも-、ここは取りあえずセレクタをネストして書いとくか」と、楽な方楽な方に流れていった結果ですね。
……コーディングのみの案件も出てきたし、今後はBEMっぽい命名規則を意識しようと思います。

ちなみに、BEMについてはこの二つの記事がとっても参考になり、且つしっくりきました。
実践 めんどうくさくない BEM
CSSをキレイに書くを追求すると行き着く「OOCSS」、「BEM」

コンパイルにCompassじゃなくてGruntを使う方法があるらしいので、そっちも試さないと……。

Filed under: