覚え書き

WindowsのSublimeText3でSass + Compass環境を作る

こんにちは。

ぶっちです。

Windowsでの開発環境として、SublimeText3でSaas + Compassを利用する為の手順について書きます。

 

必要なツールのインストール

1.Sublime Text3のインストール

WebでSublime Text3のインストーラーをダウンロードし、インストールを行います。

 

2.Package Controlのインストール

インストールしたSublime Textを起動し、「View > Show Console」と選択し、表示されたコンソールに、Package Controlインストール用のコマンドを入力し実行します。

 

3.プラグインのインストール

下記の3-1~3-3の手順を繰り返し、「sass、sass snippets、scss、scss snippets、compass、emmet」のプラグインのインストールを行います。

 

3-1.「Ctrl + Shift + p」でコマンドパレットを開く

3-2.「Package Control: Install Package」を入力し、表示された候補から同じ内容の項目を選択する。

3-3.インストールを行うプラグイン名を入力し、表示された候補から選択し、インストールを行う。

コンパイル用の設定

1.プロジェクトのルートとなるフォルダを作成

任意の場所にプロジェクトのルートとなるフォルダを作成します。

 

2.scssファイルのコンパイル用の設定

作成したプロジェクトルートに、config.rbという名前で、コンパイル用の設定ファイルを作成します。

============================
config.rb 設定例
============================
http_path = “/”
css_dir = “css”
sass_dir = “scss”
output_style = :nested
line_comments = false
============================

 

3.プロジェクトルートにcss用、sass用のディレクトリを作成

2で設定した内容にあわせ、プロジェクトルートに「css」「scss」のフォルダを作成する。

 

以上で、環境の作成は完了です。

scssフォルダ内にscssファイルを作成し、Sublime Textで編集、「Ctrl + b」でビルドを実行することで、scssファイルを基にしたcssファイルが出力されます。