Sublime Text + CompassでSASS(SCSS)を便利に使う

HTM&CSS HTML&CSS
この記事は約5分で読めます。

この記事は、9年前に書かれました。

はじめに

コーディングにSASS（SCSS）は使っていますでしょうか。若干プログラミング要素が入るため、敬遠されているコーダーさんもおられるようです。
私はCompassでSASS（SCSS）を使っていますが、使い始めた当初はmixinなどの便利さに手放せなくなりました。
ちなみに私はSblime TextでSASSを使用しています。
導入までなかなか面倒なので、備忘録としてSblime Text＋Compassの導入と使い方を記録しておきます。

導入

Compassを使用するためにはRubyが必要となります。
まずはRubyのインストールから始めます。以下のサイトよりインストーラーをダウンロードしてください。私はWindows7 64bit版を使用しました。
インストール方法はネットに多数情報がありますので、ここでは割愛します。

RubyInstaller for Windows
...
rubyinstaller.org

Rubyのアップデート実行

Rubyのアップデートを実行しておきます

gem update --system

Compassのインストール

Rubyのgemコマンドを使ってCompassをインストールします。

gem install compass

Compassが正しくインストールされたか確認するためにバージョン情報を表示します。正しく表示されたら完了です。

compass -v

Sublime Text 3 をインストール

以下からインストーラーをダウンロードします。

Sublime Text 3 - Sublime Text
www.sublimetext.com

無償で使用できますが、時々有償プランへ誘導するダイアログが表示されますが、スルーしておけば大丈夫です。

Compassを使ってみる

スタイルシートを置くフォルダは仮に以下としておきます。

/html/assets/css/ 
/html/assets/scss/

Compassを使用するために、以下２つのファイルを作成して/html/assets/の直下に設置します。
【注意】scssやcssの中でなくassetsの直下に置くこと

  • config.rb
  • compass_start.bat


config.rbをテキステディタなどで開き、中身を以下のように設定します。

http_path = "/"
css_dir = "/css"
sass_dir = "/scss"
images_dir = "/images"
javascripts_dir = "/js"
output_style = :compressed
line_comments = false
Encoding.default_external = 'utf-8'
sourcemap = true

各内容の詳細は割愛しますが、ここで重要なのはcss_dirとsass_dirです。

output_styleは、CSSを圧縮するかどうかの設定になります。以下の設定があります。

  • nested
  • expanded
  • compact
  • compressed

次に、compass_start.batの中身を以下のように設定します。このファイルは、Windowsのバッチファイルとなります。compass起動が楽になります。

set LANG=ja_JP.utf8
compass w

ここまでできましたら、早速SCSSの作成に進みます。
まずはcompass_start.batをダブルクリックします。すると、DOSコマンドプロンプトが起動します。

D:\html\assets>compass w
>>> Compass is watching for changes. Press Ctrl-C to Stop.

起動が問題なければ、Sublime Textのアプリケーションを立ち上げます。
拡張子.scssで/assets/scssの中にSCSSファイルを作成します。

一行目にはcompassのimport文を入れておきます。
簡単にSCSSを書いてみました。このように親クラスの中に子クラスを入れ子にすることが出来ます。

@import "compass"; 

.header{
	width:100%;
	position: relative;

    .header__inner{
        max-width:1000px;
        margin:0 auto;
        background-color:#efefef;
    }
}

SCSSを編集して保存をおこなうと、その度にコマンドプロンプトに以下のようなメッセージが表示され、自動的にCSSが書き出されます。

 modified scss/common.scss
    write css/common.css
    write css/common.css.map

まとめ

Sublime Text + Compass導入の簡単な手順を紹介しました。最近の傾向として、ある機能を使用したいときには別のプログラムをインストールする必要がある場合が増えています。またメジャーバージョンが変わることにより、インストール方法も大きく変わる場合があります。その都度最新の情報を取得して環境構築するのもなかなか手間がかかります。

実は、この環境で最初、SCSSがコンパイルできなくて半日悩んだことがありました。原因はフォルダ名に全角日本語が入っていたことが原因でした。全て半角英数字のフォルダ名にするとコンパイルされました。
私の環境だけ発生した現象かもしれませんが、もし同じエラーでお悩みでしたら、一度フォルダ名を全て半角英数字に変更してみてください。