Sassの開発環境を整える

最近現場でSassを使うことが多くなってきたので、備忘録のためにいろいろ書き留めておこうと思います。
ちなみにOSはWindows7以降を想定しています。

■Sassとはなんぞ??

簡単に言ってしまえば、cssの進化系。
変数を使えたり、親要素にネストして子要素を書き込めたり、効率よくスタイルを記述出来る優れもの。
Sassには書き方の違いでscssというものもありますが、cssが記述できればどちらの書き方も特に苦も無く覚えられるハズ。
いろいろと便利なSassですが、その形式のままだとhtmlから読み込めないため、cssにコンパイルしなおす必要があります。

■Sassをコンパイルする方法

やり方は複数ありますが、一番手軽で簡単だと思った方法はコレ

ATOMエディタを使う。

ATOMエディタはGitHubの創始者が開発をはじめたオープンソースのエディタで、非常に多機能。パッケージと呼ばれる拡張をインストールすることで、ほしいと思った機能がほぼ揃います。
ただ、何でも出来る分重い! とにかく重い!!
脆弱なPCでは、複数アプリケーションを開いた状態だと固まって動かなくなりまることもしばしば…
なので、自分はSassを書くときだけATOMを使い、それ以外はNotepad++を使ってます。

それはさて置き、ATOMでSassをコンパイルする方法です。
sass-autocompileというパッケージをATOMに入れれば自動でSassをcssに変換してくれるようになるのですが、sass-autocompileを動かすためにはNode.jsとnode-sassをPCにインストールしておく必要があります。

■Node.jsをインストールする

公式サイトに行き、インストーラーをダウンロードします。
https://nodejs.org/en/

(画像:pic_nodejs.jpg)

ダウンロード用のリンクが二つありますが、LTSは「長期サポート対象」、Currentは「最新版」です。
お好きな方を選んでポチッとな。

インストールが完了したら、コマンドプロンプトを開いて以下のコマンドを打ってみる。

node -v

v6.10.1 など、バージョン情報が表示されたら、正常にインストールされています。

■node-sassをインストールする

続いて、node-sassのインストール方法。
Node.jsインストール後、コマンドプロンプトを開いて以下のコマンドを入力

npm install -g node-sass

しばらく待っているとダーッと英数字が流れて、止まったらインストール完了です!!
正常にインストールされているかは、以下のコマンドを打って確認。

node-sass -v

Node.jsの時と同じように、バージョンが表示されたらインストール成功です。

■ATOMエディタをインストールする

やっと出てきましたATOMさん。
公式サイトに行くと、妙に愛想の良いタコみたいなネコみたいな宇宙人がお出迎えしてくれます。
https://atom.io/

インストーラーをダウンロードして、がんがんインストールします。
インストールし終わったATOMを起動すると、初期設定では英語になっているので、日本語にしてしまいましょう。

・左上「File」メニューから「Setting」を選択。

(画像:pic_atom01.jpg)

・開いたメニューの左下、「+Install」を選択。
・右側の画面が切り替わるので、検索ボックスに「Japanese-menu」と入力し、「Packages」ボタンを押す。
・検索結果の「Japanese-menu」の枠内の「Install」ボタンを押す。

(画像:pic_atom02.jpg)

これで日本語化は完了です。

■ATOMにsass-autocompileを入れる。

ここまで来たら、ゴールまであと少し!
日本語化した時と同じ要領で、「+Install」の検索ボックスに「sass-autocompile」と入力、「Packages」ボタン→「Install」ボタンを押す。
これで全ての準備が完了しました!
あとは、Sassを書いて保存すれば同じフォルダ内に自動でコンパイルされたcssが出現します。
ありがとう、本当にありがとう…

「ファイル」→「環境設定」→「パッケージ」からインストール済みの拡張機能が確認でき、ここからSass→cssコンパイル時の形式も設定出来ます。
状況に合わせてお好きな形式をお選びください。

・compressed… 全ての記述が1行に圧縮される(サイズは小さくなるが可読は悪くなる)
・compact… p{color:red;} のように要素とスタイルが1一行ずつにまとまる
・nested… 親要素に対して、ネストされている子要素のインデントが下がる
・expanded… 要素、スタイル、閉じカッコが各1行ずつになる(多くの人が普段書いているであろうcssに一番近い形式)

■そのほか、便利なATOMのパッケージ

せっかくなので、入れておくと便利なパッケージもご紹介。

・autoclose-html… 開始タグを入力すると自動で閉じタグを挿入してくれる
・highlight-selected… テキストを選択すると、同じファイル内の同じテキストをハイライトしてくれる
・pigments… cssなどでカラーコードを入力すると、その部分の背景色を入力した色にしてくれる

その他、かゆいところに手が届く拡張が盛りだくさんなので、ATOM使いになりたいな~、と思う今日この頃。
それにはスペックの良いPCを用意しないといけないわけですがね!
(私がATOM使いになれるのは当分先の模様)

Posted in サービス/ツール.