Sublime-Text 3 で Sass & Compass環境を構築(Mac OS 10.10)

ウェブ制作技術

こんにちわ。キタックCGSCの樋口です。

Web制作者のみなさん、エディタは何を使ってますか?
ぼくは最近ようやく噂の『Sublime-Text』を使いはじめました。

インターネットでも「いい、これはいい」みたいな評判だし、前の後輩とかが何かと薦めてきたりするし、ドットインストールさんでも入門動画があるし、なにより「恋に落ちるエディタ」っていうキャッチフレーズがすてきなので、使ってみようと思ったんです。

最初の設定がちょっとややこしかったのですが、一応 Sass & Compass 環境でコーディングできるようになったので、その設定の流れを紹介いたします。

SublimeText

まずはインストール

まずはインストールです。

Sublime-Textをインストール

公式サイトからダウンロード&インストールします。
最新版は version 3です(2015年6月現在)。

Sass と Compass をインストール

SassとCompassを使うには、お使いのPCにそれぞれインストールする必要があります。

こちらの記事が参考になりました。ありがとうございます。
【Mac】SassとCompassをインストール!エラー克服版!

Sublime-Textの下準備

Sublime-Text、Sass、Compassがインストールできたところで、Sublime-Textの設定に入っていきます。

Package Control をインストール

まず、なにはなくとも「Package Control」というものをインストールします。
Sublime-Text最大の特長として、豊富なプラグインという事ことが挙げられます。
プラグインのインストールによって必要な機能を拡張していくんですね。
そのプラグインインストールの土台となるのがこの「Package Control」です。

下記サイトにアクセスします。
「Sublime Package Control」

SUBLIME TEXT 3のタブの内容をコピーし、
Sublime Textに戻り、メニューから
View > Show Console で画面下部にコンソールウィンドウを開きます。

で、そのコンソールウィンドウに先ほどの内容をペーストし、[ Enter ]キーを押します。
「Package Control」がインストールされます。

Package Control

コマンドパレットを使う

Sublime Textをいったん再起動してから
[ command + shift + P ]
で、コマンドパレットを表示します。

これはプラグインに関して何をするにもたくさん使うショートカットなので、ぜひ覚えましょう。

コマンドパレットでinstall…と打ち始めると、「Package Control : Install Package」を表示してくれます。
「Package Control : Install Package」は、プラグインを選択してインストールするためのコマンドです。
ちなみにインストール済みのプラグインの一覧を表示するコマンドは「Package Control : List Packages」です。こちらもよく使います。

スクリーンショット_2015-06-01_10_47_14_png

Sass、Compass関係のプラグインをインストール

それでは、「Package Control : Install Package」からSass、Compass関係のプラグインをインストールしてみましょう。

「Package Control : Install Package」で[ Enter ]を押し、プラグイン一覧を表示します。
下記のプラグインをそれぞれ選択して、インストールします。

  • Sass
  • SASS Build
  • SCSS
  • SCSS Snippets
  • Compass

ここまでで必要なものはすべてインストールできました。
あとは細かい設定を行います。

Sass&Compassのための細かい設定をしていく

config.rb ファイルを作成

Sass&Compass環境に欠かせないのが「config.rb」というファイルです。
Sass&Compassでcssを吐き出す際の設定ファイルです。
これをサイトディレクトリのルート階層に置きます。

ちなみに僕のconfig.rbはこんな感じです。

  • http_path:サイトのパス
  • css_dir:cssが書き出される場所
  • sass_dir:scssファイルを入れておく場所
  • images_dir:画像ディレクトリ
  • javascripts_dir:javascriptファイルのディレクトリ
  • output_style = “expanded”:scss → css の書き出し方。 :expanded が無難かと
  • line_comments = false:cssにscssの行番号を書き出すかどうか
  • relative_assets = true:compassでのurl指定の仕方。デフォルトだと絶対パスだけど、「true」に指定すると相対パスに
  • Encoding.default_external:文字コードの設定。utf-8で指定しておくのが吉

プロジェクトの作成

Sublime Textでプロジェクトを作っておきます。

メニューで

「Project > Add Folder to Project…」

から、サイトディレクトリを選択し、

「Project > Save Project As…」

で保存します。

ビルドシステムの設定

ビルドシステムを「Compass」にします。

メニューから

「Tool > Build System > Compass」

を選択します。

準備完了!コンパイルしてみる

以上ですべての準備が整いました。

上記のconfig.rbの設定を前提とすると、「sass」フォルダ内の.scssファイルを編集し、

[ command + B ]

でビルドしてみます。
「css」フォルダ内に.cssファイルが生成または更新されていたら成功です。

最初にビルドしてしまえば、あとはCompassが監視してくれるはずなのでふつうに保存([ command + S ])で.cssが更新されていきます。

※日付をまたいだ最初のコンパイルは、あらためて[ command + B ] してあげる必要があるみたいです。

※Compassの自動コンパイルが出来ない場合(僕もそうだったのですが)下記の記事が参考になりました。ありがとうございます。

Sublime text2でCompass watchが動かない時の解決方法


以上、Sublime TextでSass&Compass環境をつくる流れでした。
いかがでしょうか?恋に落ちそうでしょうか?

それではすてきなSublimeライフを。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。