前回、Windows上で最も簡単に設定できるであろうSCSSコンパイル環境を作成しました。
上記の方法は、GUIアプリで設定&コンパイルができるので、とても取っつきやすい方法です。
ただ、できるなら、いつも利用しているSublime Textからガシガシ利用できた方が、より開発効率が上がります。
ということで今回は、以下の組み合わせでCSSコンパイル環境を作成する方法まとめたので紹介です。
- Windows環境
- Sublime Text 3[エディター]
- SCSS(Sass)[CSS拡張]
- Compass[Sass拡張]
- WordPressテーマプロジェクト
目次
主な手順
上に書いた開発環境を作成するには、以下の手順が必要です。
- Rubyのインストール
- gemのアップデート
- Sassのインストール
- Compassのインストール
- Sublime Textの各種パッケージのインストール
- プロジェクトの作成
- Compassの設定ファイルの作成
- コンパイルして動作確認
今回の方法は、Koalaを使った方法ほど手軽ではなく、コマンドプロンプトのような黒い画面でコマンド打つ必要があるので、多少手間はかかります。
ただ、初期設定こそ面倒ですが、Sublime Text使いには作業効率がアップする方法だと思います。
Rubyのインストール
Windowsは、デフォルトでRubyがインストールされていないので、まずはRubyをインストールする必要があります。
既にRubyがインストールされている場合は、この項目を飛ばしてください。
まずは、RubyInstaller for Windowsからファイルをダウンロードします。
ダウンロードをし終えたら、ファイル(rubyinstaller-x.x.x-x64.exe)を実行してください。
まず言語は日本語を選択します。
使用許諾契約書に同意して「次へ」ボタンを押します。
「インストール先とオプションの指定」画面で、インストール先を選択するとともに、「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れて「インストール」ボタンを押してください。
以下のような画面が出れば、インストール完了です。
Rubyの動作確認
ここで、正常にRubyがインストールされたか、動作確認をします。
コマンドプロンプトを起動して、以下を入力してEnterを押してください。
ruby -v
以下のように、Rubyのバージョンが表示されれば、正常にインストールされています。
gemのアップデート
ここで、以下のようにコマンドプロンプトに入力してgemのアップデートを行います。
gem update --system
すると、以下のようにgemがアップデートされます。
C:\Users\y>gem update --system Updating rubygems-update Fetching: rubygems-update-2.4.6.gem (100%) Successfully installed rubygems-update-2.4.6 Parsing documentation for rubygems-update-2.4.6 Installing ri documentation for rubygems-update-2.4.6 Installing darkfish documentation for rubygems-update-2.4.6 Done installing documentation for rubygems-update after 1 seconds Parsing documentation for rubygems-update-2.4.6 Done installing documentation for rubygems-update after 0 seconds Installing RubyGems 2.4.6 RubyGems 2.4.6 installed Parsing documentation for rubygems-2.4.6 Installing ri documentation for rubygems-2.4.6
もしエラーが出たら
もしかしたらWindowsの場合、以下のようなSSLエラーが出るかもしれません。
Gem::RemoteFetcher::FetchError: SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed
これは、WindowsのRubyGemsのバグです。
解決方法と、詳しい原因は以下を参照してください。
Sassのインストール
次に、gemでSassをインストールします。
コマンドプロンプトに、以下のように入力してください。
gem install sass
インストールがうまくいけば、以下のように表示されます。
C:\Users\y>gem install sass Fetching: sass-3.4.13.gem (100%) Successfully installed sass-3.4.13 Parsing documentation for sass-3.4.13 Installing ri documentation for sass-3.4.13 Done installing documentation for sass after 8 seconds 1 gem installed
Compassのインストール
次はgemでCompassをインストールします。
コマンドプロンプトに以下のように入力してください。
gem install compass
C:\Users\y>gem install compass Fetching: ffi-1.9.8-x64-mingw32.gem (100%) Successfully installed ffi-1.9.8-x64-mingw32 Fetching: rb-inotify-0.9.5.gem (100%) Successfully installed rb-inotify-0.9.5 Fetching: rb-fsevent-0.9.4.gem (100%) Successfully installed rb-fsevent-0.9.4 Fetching: chunky_png-1.3.4.gem (100%) (中略) Done installing documentation for ffi, rb-inotify, rb-fsevent, chunky_png, compa ss-import-once, multi_json, compass-core, compass after 8 seconds 8 gems installed
Sublime Textのパッケージのインストール
次に、Sublime Text3側の設定です。
とりあえず、これまではWordpressテーマ開発用のエディターとして以下のような設定を行っています。
上記の設定に加えて、Compassのパッケージをインストールします。
パッケージのインストール
パッケージをインストールするには、「Preferences→Package Control」を選択します。
「Package Control: Install Package」を選択します。
入力欄に「compass」と入力すると、インクリメンタルサーチされCompassパッケージが表示されるので、クリックしてインストールします。
その他のパッケージとして、以下をインストールしておくといいかもしれません。
- SCSS(ファイルタイプにSCSSを追加)
- SCSS Snippets(SCSSのスニペット)
- Sass(ファイルタイプにSassを追加)
プロジェクトの作成
次に、プロジェクトを作成します。
今回は、Wordpressテーマのstyle.cssを書くためのプロジェクト作成しようと思っています。
まず、フォルダを作成します。(今回は「wp-theme」というフォルダを作成)
そのフォルダの下に以下のように、「config.rb」と「style.scss」の空のファイルを作成します。
- wp-theme
- config.rb
- style.scss
Compassの設定ファイルの作成
Compassの設定は、「config.rb」に以下のように記入します。
require 'compass/import-once/activate' # アディショナルCompassプラグインを利用するなら以下に書く # プロジェクトのディレクトリをここにセットする http_path = "/" css_dir = "/" #CSSを書き出すディレクトリ sass_dir = "/" #SASSファイルがあるディレクトリ images_dir = "images" #画像用のディレクトリ javascripts_dir = "js" #JavaScriptファイル用のディレクトリ # アウトプットスタイルの選択(利用するスタイルのコメントを外して利用する)(デフォルト:expanded) # output_style = :expanded #通常のアウトプットスタイル # output_style = :nested #Sassなどのネストを継承したスタイル # output_style = :compact #1つのCSSCSSレイクタの設定が1行になるスタイル # output_style = :compressed #コメントを取り除いて完全に圧縮するスタイル # Compassで拡張された関数で使うURLを、絶対パスか相対パスかを指定(デフォルト:false[絶対パス]) # relative_assets = true # デバッグ用のコメントを出力するか(デフォルト:true[出力する]) # line_comments = false # SCSS記法とSass記法の切り替え # Sass記法を利用する場合は、以下のコメントを外してください # preferred_syntax = :sass
WordPressのstyle.css向けなので、上記のように設定しました。
アウトプットスタイルの変更や、デバッグ用コメントの挿入、Sass記法への切り替えなどは、適切な部分をコメントアウトして設定変更してみてください。
config.rbの設定について詳しくは、以下を参照してください。
参考 CSSの常識が変わる!「Compass」の基礎から応用まで! | 株式会社LIG
コンパイルして動作確認
次にコンパイルを行うため、先程作成したstyle.scssファイルに記入します。
SCSSの記入
今回はテスト用に、以下のように記入しました。
@charset "utf-8"; /*! Theme Name: WP-Theme Author: yhira */ $theme_color: red; $link_color: blue; $text_color: #111; $theme_fonts: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif; body{ font-family: $theme_fonts; } header{ background-color: $theme_color; } #main{ margin: 10px; p{ color: $text_color; } a{ color: $link_color; text-decoration: none; } img{ border: 1px solid #eee; } } #sidebar{ margin: 5px; a{ color: $link_color; text-decoration: underline; } } footer{ background-color: $theme_color; }
注意点
@charset "UTF-8";
「@charset “UTF-8”;」を記入しておかないと、コンパイル時に以下のようなエラーが出るので必ず入力するようにしてください。
Invalid Windows-31J character
コンパイル後も、コメントを残すには、以下のようにコメントに!(エクスクラメーション)を記入してください。
/*! Theme Name: WP-Theme Author: yhira */
WordPressのテーマ情報を残したい時などに重宝します。
Sublime Text3でコンパイル
まずはプロジェクトの「style.scss」ファイルを選択します。
Sublime Text3のメインメニューから、「Tools→Build System→Compass」を選択します。
「style.scss」ファイルを開いて、「Tools→Build」、
もしくは、Ctrl+Bキーを押せばSCSSファイルがコンパイルされ、style.cssファイルが作成されます。
ショートカットキーを押すだけで、0.5秒ほどでコンパイルされ、
同フォルダ内に「style.css」ファイルが作成されました。
デフォルトの設定でコンパイルすると以下のようなスタイルシートが作成されました。
@charset "utf-8"; /*! Theme Name: WP-Theme Author: yhira */ /* line 10, style.scss */ body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } /* line 14, style.scss */ header { background-color: red; } /* line 18, style.scss */ #main { margin: 10px; } /* line 21, style.scss */ #main p { color: #111; } /* line 25, style.scss */ #main a { color: blue; text-decoration: none; } /* line 30, style.scss */ #main img { border: 1px solid #eee; } /* line 36, style.scss */ #sidebar { margin: 5px; } /* line 39, style.scss */ #sidebar a { color: blue; text-decoration: underline; } /* line 45, style.scss */ footer { background-color: red; }
ネストや変数が展開されます。コメントは、デバッグ用に編集箇所がわかるようになっています。
これらの出力方法を自分好みにカスタマイズするには、プロジェクト内の「config.rb」を編集します。
まとめ
今回のSublime Text3を使った方法は、Koalaを使った方法ほど手軽ではないにせよ、手順を追って1つ1つ行っていけば、ほぼコピペだけで設定を行えるので、それほど難しくはないと思います。
それにしても、Sublime Textで、Emmetと、SCSSと、Compassを利用した、CSS編集の爽快感というか気持ちよさはハンパないです。
ちょろっとコードを書くだけで、綺麗に整理されたCSSがザクザク生産できます。Compassの設定を少し変更するだけで、ページ高速化対応にも簡単にできますし。
最初っから、面倒くさがらずに、この設定を調べてやっておけば良かったです。