bracketsでsassを使う方法と設定を初心者向けにまとめてみる

2017年6月19日2019年4月6日

僕愛用のテキストエディタBracketsでsassを使う方法について。

フリーランスで仕事するとわかるんですが、仕事は早くやればやるほど、時給換算すると高くなります。これはコーディングも同じで、早くコーディングすればするほど短い時間で早く稼げるようになるので、フリーでWeb制作すると誰しもが早くコーディングしようと思うはず。

で、僕は早くコーディングするため、愛用のテキストエディタBracketsにemmet(zen code)やsassを導入したりしてます。

emmetはただプラグインを入れるだけなので簡単ですが、sassはちょっとややこしい。。。
というのもやり方が色々あって、Bracketsのプラグインだけで完結させたり、gulpやguretといったタスクランナーでやったりなどなど、、、）

とまあ、やり方が色々とあるわけです（笑）。僕はただBracketsで簡単にsassを使いたいだけなんだ、、、

最終的にkoalaというソフトを組み合わせてBracketsでsassを使っています。これが結構楽に使えるのです。

今回は、koalaを組み合わせて手軽にBracketsでsassを使うための必要なもの、使い方を解説します。
かなり楽にBracketsでsassが使えるようになるので、Bracketsでsassが使いたい初心者の方はご覧くださいませ〜。

Bracketsでsassを使う為に用意するもの

さて、早速まいりましょうー。

まずはじめにテキストエディタのBrackets以外に、必要なものを↓にまとめてます。

用意するもの

• sassをcssに変換してくれるやつ、ここではkoalaってやつを使います（コンパイルするやつ）
• ruby
• sass

が必要です。（こう見ると結構あるなー、、）

色々ありますが、一回準備すればsassをcssに変換してくれるkoalaだけで十分なので、最初だけ頑張りましょう〜。

Windowsならまず、Rubyを入れよう（Macならすっ飛ばしてOK）

では色々とインストールしていきましょう。

まず、sassを使うにはRubyを導入する必要があるのでpcにRubyをインストールしてください。
※なんでRubyがいるのかというと、sassをcssに変換する際にsassを使っているからです。

 

Macなら最初から入っているので、この工程はすっ飛ばしてOK。Windowsの人だけやりましょう。

Windowsの人は以下からsassをDL
ruby DL：https://rubyinstaller.org/downloads/

Latest newsの下のリンクをクリック。このスクショだとver 2.4.1のとこです。

RubyをDL後、そのままインストールしましょう。

また、インストールの際は、

• Rubyの実行ファイルへ環境変数PATHを設定する
• .rbと.rbwファイルをRubyに関連づける

これに必ずチェックを入れてインストールしましょう。これ入れないと後々でかなり面倒に、、、

ターミナルからsassをインストールしましょう！

さて、ここでさっきインストールしたRubyを早速使います。
Rubyを使ってsassをインストールするんですが、手動でコマンドをうつ必要があります。

Macならターミナルを開いて、以下のコマンドを

sudo gem install sass

入力後エンター。

その後、pcのパスワードを入力すればOK。

自動的にsassがインストールされます。
初めてターミナルを使っている方はドキドキかもしれませんが、ちょくちょくターミナル使う場面出てくるので慣れておくといいかも。

Windowsでsassをインストールする場合

Windowsは、コマンドプロンプトを開いて

gem install sass

と入力してエンター。

こちらもMacのターミナルと同じく、コマンドプロンプトはちょくちょく使うようになるので、慣れておくといいかも。

sassファイルをcssにするkoalaをインストールしよう

次はsass → cssにしてくれるやつをインストールします。

koalaというソフトをここでは使います。

他にもソフトは色々ありますが、非常にシンプルに使えるので僕はこれを使ってます。

jsのminify化（圧縮）や複数を1つにまとめることもできたりして、色々と便利だったり。

koalaは以下からDLを。
https://koala-app.com/

DLしたらpcにインストールしましょう。

koalaが無事に起動すればOK。

sassの準備はこれでOK！

これでBracketsとkoalaでsassを使う準備は完了しました！

今からは、実際にBracketsとkoalaを使ってやってみましょう。

まず、koalaで実際にsass→cssへ。

koalaでsassからcssへ変換してみる

さて、早速sassをcssへ変換してみましょう。

手順だけ先に書いておきます。

1. koalaを起動
2. 表示されるkoalaのウィンドウにsassがあるフォルダをドロッグアンドドロップ
3. koalaのウィンドウに先ほど、ドラッグしたフォルダが表示されています。
4. koalaでsassファイルを選択して、右側にある「コンパイル」とかかれたボタンをクリック
5. sassファイルと同じフォルダにcssが生成される

以下で実際にやってみます。

koalaを起動

まず、koalaを立ち上げて、ウィンドウを表示させましょう。

※スクショはmacです

表示されるkoalaのウィンドウにsassがあるフォルダをドロッグアンドドロップ

ウィンドウが画面付近に表示されます。

sassファイルが入っているフォルダをkoalaのウィンドウ上にドラッグアンドドロップしてみましょう。

うまく行けば、左側にドラッグアンドドロップしたフォルダが追加されています。中央にはsassファイルが追加されてます。

左側にフォルダが、中央にファイルが、右にsassの設定がそれぞれ表示されます。

koalaでsassファイルを選択して、右側にある「コンパイル」とかかれたボタンをクリック

それで中央に表示されてる、sassファイルをクリックしましょう。sassファイルが選択されます。

その後、右にある「コンパイル」とかかれたボタンをクリック！

sass→cssが完了です。sassファイルが入っていた同じフォルダ内にcssファイルが生成されています。

sassをcssにすることができました。これでsassは使えるようになりましたが、このままだと使い勝手が悪いのでkoalaの設定をちょっといじります。

実際に僕がkoalaで使っている設定

sassファイルを選択した状態で以下の設定をしてみてください。

• 自動コンパイルへチェック：sassを保存した時に自動でcssが生成されるようになる。
• Autorefix：ベンダープリフィックス、-ms-flexとかが、コンパイルした時、cssに自動でつくようになり
• アウトプットスタイル、compact：生成されたcssが1行に収まるように作られる。

これで僕と同じ設定です。

この設定にすると、koalaを起動してsassを保存したら自動でcssがつくようになり、cssもコンパクトになります！

最後にBracketsにBrackets SASS Code Hintsを入れてsassをちょっと使いやすくしよう

sassのコードヒントがBracketsの初期に付属していないので、それだけBracketsのプラグインで入れておくと楽です。

Brackets SASS Code Hintsというものです。これをインストールしときましょう。Bracketsでsassが使いやすくなります。

これでkoalaを使ってBracketsでsassを使うのはバッチリです！

koalaをおすすめの理由

Bracketsでsassを使うならプラグインのBrackets sassやgulpのようなタスクランナーがありますが、僕はkoalaでひとまずOKと思います。

というのも、Brackets sassもgulpもjsonで設定ファイルを作る必要があり、ちょっとめんどくさい。。。

結局、koalaでもjsonを使うことになったりするのですが、とりあえずsassを最低限使うだけならkoala入れておけば楽に使えるのでOKなんじゃないかなと感じています。

視覚的にわかりやすく、とりあえずsassをコンパイルするだけなら、簡単にできるのでとりあえずkoalaでOK。と思っているわけです。

難しいことは必要になってからでOKでしょう。

まとめ

ひとまず、このページの内容をやっておけばsassを保存したらBracketsでsassを保存した時に、cssを自動生成できるようになります。
sassが使えるようになれば、cssの作業効率がかなり上がりますので、sassの導入考えている人はぜひ！

ちなみにBracketsでftpしつつsassしたいなら、↓の記事のeqftpとこの記事の内容合わせて行えばOKです。
僕はこの方法でftpでもsassを使ってます。

Bracketsで最低限入れた方がいいプラグイン↓