web制作

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

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

この記事の要点!

  • sassを簡単にcssにすることができるようになる(koalaでsassをコンパイルできるようになる。
  • Bracketsでsassを扱うやり方がわかる。

僕愛用のテキストエディタ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)

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

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

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

 

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

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

ruby_latest_news

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

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

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

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

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

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

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

Macでsassをインストールする場合
Macならターミナルを開いて、以下のコマンドを

sudo gem install sass

入力後エンター。

Macのターミナルでsassをインストールする

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

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

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

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

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

gem install sass

と入力してエンター。

Windowsでコマンドプロンプトでsassをインストールする

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

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

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

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

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

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

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

koalaは以下からDLを。
http://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を立ち上げて、ウィンドウを表示させましょう。

koalaを起動

※スクショはmacです

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最後にBracketsにBrackets SASS Code Hintsを入れて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の導入考えている人はぜひ!

koalaを起動していないとsassがcssへ変換されないので注意!

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

2017.06.09

【徹底解説】BracketsのeqFTPを使ってFTP接続する方法

Bracketsのプラグインでftpを導入した時に、ちょっと苦戦したのでメモ。ちなみにBracketsについての記事も書いてます。 Bracketsは優秀なテキストエディタなのですが、初期の機能にftpがついていないので、プラグインで拡張する必要があります。 Bracketsでftpが導入できるプラグインは色々とあるのですが、eqFTPが僕

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

2017.06.12

最低これだけは入れたいBracketsのプラグイン6つ!

Extract for Brackets (Preview)Bracketsは最初からそれなりに機能が付いてますが、それで満足かと言うとそうでもありません。もうちょっとだけ機能が欲しい。。。 テキストエディタを過去にいくつか使ってきましたが、どれもプラグインを入れて使ってたので、テキストエディタ使う時はプラグインのインストールは必須な