こちらで紹介したようにテーマをダウンロードする際にSassに対応したテーマにするかどうかを選択できるチェックがあります。

そちらにチェックを入れてテーマをダウンロードしてみると、こんなファイル構成になっています。（記事執筆時）

縦長すぎる画像で申し訳ありませんが、これくらいファイルが細分化されています。メンテナンス性やカスタマイズ性の話は置いておいて、_sを触り始める際には特定の記述の箇所を探すのに手間がかかるというデメリットを感じました。ですので、慣れるまでは１ページのスタイルシートで制作していこうと思います。

けれど、Sassが使いたい！しかし、Sass+Compassが使いたいです。

今回は簡単ではありますが、_sテーマのスタイルシートをSass対応に変換する方法をご紹介します。といっても、既存のサービスを利用するだけなので簡単です。

デフォルトCSSをSassに変換する

まずは、Sass対応していない_sテーマのstyle.cssファイルの中身をコピーしましょう。通常はルートディレクトリに置いてあるはずです。

そして、こちらのサイトにアクセスします。

css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

こちらの上部インプット部分に先ほどコピーしてきたCSSコードをペーストします。

そしてscssに変換したいので、【convert 2 scss】をクリックします。

すると、下のインプット部分に上のCSSをSCSS形式に書き換えたコードが表示されます。それらをコピーしてきましょう。

そして、新しくstyle.scssというファイルを作成し、ペーストします。これでstyle.scssファイルの完成です。

まとめ

作成したファイルを任意のフォルダに入れてコンパイルしながら使いましょう。僕の場合だと、assets > stylesの中に入れてgulpでwatchさせてルートに書き出すようにしています。またその辺は需要があればおいおい書こうと思います。

さぁ、これで_sを触りやすくなりました。今後、学習を進めていきたいと思います。