【Sublime Text 2】 Emmet/Sass/SCSS(Compass)を導入して、さくさくコーディングする準備をしよう！

HTMLとかCSSとか、コーディング勉強中。とろあ( @tohroa )です。

WindowsをVistaから8にUpgradeする際、インストールしているソフトなどの環境を引き継がず、一から必要なソフトを見直しています。

使い慣れたソフトは、やはり再インストールしていたのですが…

テキストエディタについて、今まで使っていたSakuraエディタから、話題の「Sublime Text 2」に切り替えていました。

とはいえ、全く使いこなせていなかったので、週末は、Sublime Text 2の使い方を少しお勉強したので、備忘録として残しておこうと思います。

はじめに

ざっと説明して参りますが、細かい手順はサイトでわかりやすく説明されておりましたので、ここでは各サイトへのリンクをまとめる形で進めていきたいと思います。

後に、しっかり理解してまとめられるようになったら、まとめようかな・・・・・・

Sublime Text 2 をインストール

まずは、Sublime Text 2のインストール手順から。

導入は方法はココがとてもわかりやすく、しかもオススメのパッケージなども記載されていて参考になりました。

参考リンク：Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog

基本英語であること、設定やパッケージ(追加機能)の導入がUIでの設定ではなく、設定ファイルに直接記入する方式なので、若干取っつきにくい感じがしてしまいますが、上記サイトを参考にすると簡単に設定を行うことが出来ました。

Emmet のインストール

Emmet って？

Emmetとは、Zen-CodingというHTML/CSSのコーディングをとっても楽にしてくれるプラグインです。

…っていってもわかんない人もいますよね。自分もZen-Codingすら知らなかったので。

とにかく、Emmet(Zen-Coding)を使用すると、スニペットという簡略化された記述方法でHTMLのコーディングが出来て、さらに、divとかliとか、いっぺんにいくつも作りたい時に簡単に作成出来たりして便利！！…そうです。

ごめんなさい。僕も導入出来たくらいで、全然使いこなせておりません。

とりあえず、「html:5」と書いて、Emmetを使用することで、HTML5のベースとなるHTMLソースが展開されたことに驚き、「これ、すげーーっ！！」なんて思っているところです。

Sublime Text 2 に Emmet Packageのインストール

EmmetをSublime Text 2で使用するには、Emmetプラグインを導入する必要があります。

上記、Sublime Text 2のインストールにて、Package Controlは導入済みと思われますので…

Sublime Text 2のメニューより、[Preferences]->[Package Control]->[Package Control:Install package]を選択。

次に”emmet”と入力して見つかった「Emmet」パッケージをインストールします。

Emmetの導入はこれだけなのですが、HTML/CSSを記述するためのスニペットを覚えるのが大変そう。

以下サイトにEmmetのチートシート(リファレンス)がまとめられているのですが…とても覚えきれません。実際に使いながら覚えていきたいと思います。

参考リンク：Cheat Sheet

Sublime Text 2にてスニペットを入力した後に、[Ctrl + E](Windows)と入力すると、Emmetの機能によりHTMLソースが展開されます。

これは使いこなすと本当に便利そう。頑張って覚えよう。

Sass/SCSS(Compass) のインストール

Sass/SCSS(Compass) って？

Sass/SCSS(Compass)とは、CSSの記述をすっごく楽にしてくれるメタ言語です。

また、曖昧な表現ですが。

機能的にはEmmetと非常ににているのですが、こちらは、よりプログラミングするような感覚でCSSを記述することが出来るようです。

定数として値(サイズや色)を決めておくことができ、更に、関数・雛形のようなmixinという機能が、CSSのコーディングとメンテナンスを行いやすくしてくれそうです。

Sublime Text 2 で Sass/SCSS(Compass)を使用する

今回、僕の場合、Sass/SCSS(Compass)のインストールからつまずいていました…

ちゃんとわかっている人からすれば、当たり前の事なのかも知れませんが、Compassが動くようにするには以下手順が必要です。

• 1. Rubyをインストールする
• 2. PC(Windows/Mac)にSass/Compassをインストールする
• 3. Sublime text 2でSass/CompassのPackageをインストールする
• 4. Compassの設定、プロジェクトを作成する
• 5. Compassに従った.scssファイルにコーディング
• 6. Ctrl + B(Windows)を押せばCSSファイルを出力してくれます

僕は、1,2の手順をすっ飛ばしてしまっていたため、一時、Sublime Text 2でSassファイルのコンパイルが出来ず止まってしまいました。

Sublime Text 2上で、Compassを実行しようとしたところ、「そんなコマンドはありません」って……

上の手順を、以下サイト参考にしながら実行。

Ruby、Sassのインストール

参考リンク：SassをWindowsにインストールする – あと味

Compassのインストール

参考リンク：SassとCompassを使って楽しくCSSコーディング！ – Develo.org

Compassのコーディング、コンパイル

参考リンク：Sublime Text 2 で Sass/compass のコンパイルができるパッケージ 『Compass』 « shilog

更に、色々調べていると、以下サイトに行き着いたのですが、こちらの考え方がすごくCSSのメンテナンス性に優れているなと感じたので、早速真似させて頂こうと思っております。

参考リンク：(S)CSSの書き方メモ – Weblog – hail2u.net

この他にも、Compass CSS3というベンダープレフィックスをまとめて補完してくれる便利な機能が予め用意されているらしく、ChromeやSafari、Firefoxなどのベンダープレフィックスを一つ一つ記入する必要がなくなって…コーディングもスッキリするし、CSS自体はきっちりコーディング出来るし、いいことづくめじゃないですか？！

これはもう覚えるしかないですね。

Compassの@Import機能リファレンス。(英語)

参考リンク：Compass CSS3 | Compass Documentation

おわりに

自分で記載した説明部分がほとんどなくて恐縮ですが…

週末に導入＆試してみて、Emmet、Sass/SCSS(Compass)、そして、Sublime Text 2の便利さが身に染みました。

EmmetとかSass/SCSS(Compass)に関しては、「楽したい」って考えから生まれてくるような機能だと思いますが、覚えると本当に楽になるのは間違いありません。

これは、「タイピングには自信があるし、コーディングぐらい毎回手打ちでやるよ」ってだけの話じゃなくて、コーディングスピード、メンテナンス性、視認性、と本当に幅広く役立つので、いち早く体得したいと思います。