いまさら聞けないSassの使い方入門―― インストールとコマンド、Dreamweaver連携：爆捗！ WordPressテーマ作成ショートカット（4）（3/3 ページ）

» 2014年02月19日 18時00分公開

[岡本紳吾，hatte.Inc]

前のページへ 1|2|3 　　　　　　

@importで置き換えて、Partialを作成

　ひとまず、デフォルトのスタイルをリセットしている部分を@importで置き換えよう。

　とりあえず、64～100行目を@importで置き換えてみることにする。

　対象となる行をコピーして新規ファイル、「_reset.scss」にペーストして保存する。

　もともとのコードがあった部分には@import文を書こう。

@import "reset";

　Partialのファイル名にはアンダースコアが含まれているが、インポート時にアンダースコアを入れる必要はない。これでコンパイルをすると、.cssファイルはもともとあったような状態になっているはずだ。

　このように、もともとあったようなCSSが書き出された。フォーマットはコンパイル時に指定したものになるので、行番号が元のファイルとは異なっていることが分かる。

　試しに「--style compressed」オプションを付けてコンパイルしてみると、このようになった。

Sassのネスト機能でシンプル化

　さて、@importが使えたので、次はSassのネスト機能を使ってコードをシンプルにしてみることにする。

a {
  color: #24890d;
  text-decoration: none; }
a:focus {
  outline: thin dotted; }
a:hover,
a:active {
  outline: 0; }
a:active,
a:hover {
  color: #41a62a; }

CSS

　とあるので、aタグ関連の定義をしている部分はネストで表現できる。

a {
  color: #24890d;
  text-decoration: none;
  &:focus {
    outline: thin dotted;
  }
  &:hover {
    outline: 0;
  }
  &:active {
    outline: 0;
    color: #41a62a;
  }
  &:hover {
    color: #41a62a;
  }
}

Sass

　これも正しくコンパイルされるはずだ。

CSSをSass化する逆コンパイルサービス「css2sass」

　もし、もともとあるCSSをSass化したいのであれば、変換サービスを利用してみるのもいいだろう。

　「css2sass」では、.cssファイルを.scss／.sassファイルに変換してくれる。ファイルがどのように変換されているのか比べることで、学習にも役立つと思う。

「css2sass」の使用例

　このサービスを利用して変換した.scssファイルを.cssに再コンパイルしてアップロードしてみたが、問題なく表示された。

次回は、Compassでさらに爆捗！

　これでWordPressでもSassを使っていく準備が整ったといえる。次回は、さらにコーディングを爆捗させる「Compass」などのツールを紹介していく予定だ。

サンプルのダウンロード

　本稿で紹介したscssファイルと変換したcssファイルを、GitHubに置いておいたので、どのように展開されているかを確認してみてほしい。本連載で作成したサンプルのコードやファイルは全てGitHubからダウンロードできる。

「次回」へ

「爆捗！ WordPressテーマ作成ショートカット」バックナンバー

岡本紳吾（おかもとしんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto