検索
連載

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

本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、Sassの環境構築、基本的な使い方、WordPressのテンプレート作成をSassではかどらせる方法、CSSをSass化する逆コンパイルサービスを紹介する。

Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

@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


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る