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

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

[岡本紳吾,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からダウンロードできる


岡本 紳吾(おかもと しんご)

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


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。