---
title: "Sass対応していない_s(underscores)を簡単にSass対応させる"
canonical_url: "https://olein-design.com/blog/default-css-convert-to-scss"
language: "ja"
date_published: "2014-12-12T15:19:57+09:00"
date_modified: "2014-12-12T15:19:57+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "underscores"
---

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

[こちら](https://olein-design.com/wordpress/ready-for-creating-theme-by-underscores)で紹介したようにテーマをダウンロードする際に**Sassに対応したテーマにするかどうか**を選択できるチェックがあります。 ![ready-for-underscores-02](https://olein-design.com/wp-content/uploads/2014/12/ready-for-underscores-02-1024x319.png) そちらにチェックを入れてテーマをダウンロードしてみると、こんなファイル構成になっています。（記事執筆時） ![change-for-sass](https://olein-design.com/wp-content/uploads/2014/12/change-for-sass.png) 縦長すぎる画像で申し訳ありませんが、これくらいファイルが細分化されています。メンテナンス性やカスタマイズ性の話は置いておいて、_sを触り始める際には**特定の記述の箇所を探すのに手間がかかる**というデメリットを感じました。ですので、慣れるまでは**１ページのスタイルシート**で制作していこうと思います。 けれど、**Sassが使いたい！**しかし、Sass+Compassが使いたいです。 今回は簡単ではありますが、**_sテーマのスタイルシートをSass対応に変換する**方法をご紹介します。といっても、既存のサービスを利用するだけなので簡単です。 ## デフォルトCSSをSassに変換する

 まずは、Sass対応していない_sテーマの`style.css`ファイルの中身をコピーしましょう。通常はルートディレクトリに置いてあるはずです。 そして、こちらのサイトにアクセスします。 [css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code](http://css2sass.herokuapp.com/)[!\[\](http://b.hatena.ne.jp/entry/image/http://css2sass.herokuapp.com/)](http://b.hatena.ne.jp/entry/http://css2sass.herokuapp.com/)

 こちらの上部インプット部分に**先ほどコピーしてきたCSSコードをペースト**します。 そして**scss**に変換したいので、【convert 2 scss】をクリックします。 すると、下のインプット部分に**上のCSSをSCSS形式に書き換えたコード**が表示されます。それらをコピーしてきましょう。 そして、新しく`style.scss`というファイルを作成し、ペーストします。これで**style.scss**ファイルの完成です。 ## まとめ

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