Sublime Text 3でSASS(SCSS)をコンパイルする方法

   

CSS拡張メタ言語の「SASS(SCSS)」をテキストエディタ「Sublime Text 3」で扱う際のメモ。

関連記事：
Chocolateyの使い方
http://malog-notes.blogspot.jp/2015/01/chocolatey.html

Rubyのインストール

Windowsの場合はRubyが標準搭載されていないので、Rubyが入っていない場合はまずインストール。
cinst ruby

その他のWindows版RubyバイナリはRubyのWebサイトを参照。
https://www.ruby-lang.org/ja/downloads/

SSL証明書エラーへの対策

https://gist.github.com/luislavena/f064211759ee0f806c88から「AddTrustExternalCARoot-2048.pem」を保存。
拡張子が.txtになっている場合は.pemに直す。

次にRubyGemsの場所を確認。 
gem which rubygems
「C:/tools/ruby215/lib/ruby/2.1.0/rubygems.rb」のようなファイル名が表示されるので、末尾の「.rb」を抜いて移動。
移動先のフォルダ内にある「ssl_certs」フォルダを開き、保存した「AddTrustExternalCARoot-2048.pem」を置く。

SASSとCompassのインストール

SASSをインストール。 
cinst sass

Compassをインストール。 
cinst compass

SASS・Compass用のプラグインをインストール

Sublime Text 3にSASS(SCSS)のサポート・コンパイルを行うためのプラグインをインストール。
  • Sass
  • SCSS
  • Compass
  • SASS Build

デフォルトのファイルの作成・プロジェクトの保存

SASS(SCSS)用のファイルを作成したいディレクトリに移動して 
compass create

のコマンドでconfig.rbやSASS(SCSS)用のフォルダ・書き出したCSS用のフォルダが作られるので、これらを含んだフォルダをSublime Text 3で開いてプロジェクトを保存。

compass createのオプションを参照したい場合は
compass help create

例えば 
compass create フォルダ名
と打つと、指定した名前のフォルダが作られ、その中にconfig.rb等が作られる。

create時にオプションを指定しなくても、フォルダ名等の設定はconfig.rbからいつでも変更可能。

設定例：
  1. require 'compass/import-once/activate'
  2. http_path = '/'
  3. 　
  4. # CSSが出力されるフォルダ
  5. css_dir = 'css'
  6. 　
  7. # 元となるSCSSファイルの設置フォルダ
  8. sass_dir = 'sass'
  9. 　
  10. # キャッシュフォルダ
  11. cache_dir = '.sass-cache'
  12. 　
  13. # オリジナルのSCSSの行番号を、CSSにコメントとして書くか否か
  14. line_comments = false
  15. 　
  16. # :expanded…標準的なCSSの記述形式
  17. # :nested…SASS(SCSS)のネスト風インデント
  18. # :compact…1セレクタにつき1行にまとめる
  19. # :compressed…圧縮(改行なし、コメントなし))
  20. output_style = :compact

ビルド

Build Systemで「Compass」を選択してBuild([Ctrl]+[B])

  • キャッシュがSublime TextのCompassフォルダに作られる場合はconfig.rbでcache_dirを設定。
  • ダブルクォートで要素を囲っている場合、分離符(\)にはエスケープが必要なので注意。
  • フォント名に日本語を使用している等で、日本語が文字化けする場合には
    Package Control: List Packages→CompassでCompassのフォルダを開き、build.cmdに「set RUBYOPT=-EUTF-8」を追加。 
    setlocal EnableDelayedExpansion
set fileDir=%~f1
    ↓ 
    setlocal EnableDelayedExpansion
set fileDir=%~f1
set RUBYOPT=-EUTF-8

compass watch

保存の度にコンパイルする監視モードにしたい場合は
Package Control: List Packages→CompassでCompassのフォルダを開き、build.cmdを書き換える。 
compass compile '%fileDir%' --boring
↓ 
compass watch '%fileDir%' --boring

Cancel Buildでストップ。

〈