Sass対応していない_s(underscores)を簡単にSass対応させる

投稿日:

カテゴリー:

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

ready-for-underscores-02

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

change-for-sass

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

けれど、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を触りやすくなりました。今後、学習を進めていきたいと思います。

Gifu WordPress Meetup の
運営・開催に協力しています。

WordPress Meetup とは、世界各国 100 以上の国々で 700 余りの グループが活動している WordPress コミュニティです。

オレインデザイン代表 久野晃司は、岐阜での WordPress Meetup の運営・開催に協力しています。

CoderDojo岐阜 の
運営・開催に協力しています。

CoderDojo とは 7〜17歳を対象とした非営利のプログラミング道場で、CoderDojo岐阜は岐阜県岐阜市にある みんなの森 ぎふメディアコスモス を拠点として毎月定期開催をしています。

オレインデザインは、CoderDojo岐阜へ寄付を行い、定期的かつ安定的な運営と開催に協力をしています。