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

ホームページのお話しませんか?

気楽にカフェや喫茶店で雑談するくらいの雰囲気で、あなたのホームページのお話をしませんか?

  • ブックマーク
  • -
    コピー

この記事を書いた人

久野 晃司

岐阜を中心にWeb制作全般のお仕事をしているフリーランスです。趣味はサッカー・F1観戦。英国プレミアリーグ、マンチェスターユナイテッドを長年愛しています。英国滞在歴2年、日常英会話くらいは大丈夫です。20ヶ国以上列車で単独周遊してきました。WordPress大好きです。Gifu WordPress Meetup共同オーガナイザー・CoderDojo岐阜チャンピオンなどの活動もしています。