連載
» 2014年02月17日 18時00分 UPDATE

爆捗! WordPressテーマ作成ショートカット(3):CSSコーディングで泣かないためのSassの基礎知識と10の利点 (1/3)

本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗(はかど)らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。

[岡本紳吾,hatte.Inc]

 本連載「爆捗! WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」(以下、Dreamweaver)でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPress初心者でも爆捗! テンプレートカスタマイズ&ショートコード作成超入門」でWordPressの内部構造、Dreamweaverを使ったテンプレートのカスタマイズ方法、ショートコードの作り方について解説した。

 今回は、さらなる爆捗のために「Sass」を紹介する。

現場におけるCSSコーディングの3つの問題点

 Webサイトを素早く作成していくためには、いかに効率的にコードを書くかというところがポイントとなってくる。WordPressはCMSなので、サイトの更新は非常に楽になる。しかし、構築時はテンプレート作成という作業がどうしてもついて回る。このテンプレート作成をより効率的にするにはどうすればいいのだろうか。

 昨今、複雑になっているCSSのコーディングを、より便利にする技術に注目が集まっている。Dreamweaverは「CSSデザイナー」というパネルを開発して制作者の負担を減らすようにしているのだが、CSSはどうしてもコーディングした人のクセが如実に現れてくるのも事実だ。

【1】個人個人のクセ

 チームで制作をしているときなど、個人個人のクセが出ているCSSを触るのはとてもストレスになるし、場合によっては不具合となって画面に現れてくる。これに対してコーディング規約を作ったり、さまざまなルールを作って、誰が制作しても問題が起きにくいように工夫したりしている制作会社も少なくないだろう。

【2】たくさんの継承

 またサイト制作に当たって、CSSを書こうとすると「面倒くさいな」と思う場面に出会うことがよくある。複雑な構造を持つHTMLになってくると、たくさんの継承が登場してきて、その都度コードをコピーしたりしてスタイルを作りこんでいくことになる。

【3】スタイルの使い回し

 また、同じようなスタイルをあちこちで使い回していたりと面倒な作業が増えていく。よく使う色やマージンなどの幅は、コード内から見つけてきてコピー&ペーストすることがある。そのような手間を掛けずに、よく使う値は変数としてキープしておけば、簡潔に使い回しができるはずだ。

“構文的にすげえスタイルシート”Sassとは

 このようなCSSを使う上で面倒になりがちな部分を、プログラム的に置き換えて無駄を排除しようと考えられたのがSassだといえる。

dreamWP03_1.jpg Sassの公式サイト

 Sass(サスと呼ばれている)は、「Syntactically Awesome StyleSheet」の略だ。直訳すると「構文的にすげえスタイルシート」という感じだろうか。とにかくすごそうだが、実際に利用している人たちからは、称賛のコメントしか聞こえてこない。Sassとはどういうものかを図解したものがこれだ。

dreamWP03_2.jpg

 SassはそのままではWebブラウザーに認識されない。Sassのファイルである.scssファイル(.sassファイルもある)をコンパイラーに通すことで.cssファイルを生成することになる。やや面倒そうだが、これから解説するSassの機能を見ると、コンパイラーなしでは成立しないことが分かっていただけると思う。

 コンパイラーの使い方を含むSassを使うための環境構築の仕方は、次回解説する。

Sassの基本的な記述の仕方(SASS記法とSCSS記法の違い)

 Sassでの記述はCSSに似ているが、独特の入れ子構造や変数の定義、@から始まる制御構文などで構成されている。

 SassにはSASS記法(拡張子を.sassにする)とSCSS記法(拡張子を.scssにする)の違いがある。もともと、SassはSASS記法を採用していたが、Sass 3.0からCSSの記述の仕方に近いSCSS(Sassy CSS)記法でも記述できるようになった。

 どちらを採用するかは、現場によって変わるだろうが、もともとのSASS記法の方がよりコーディングを簡略化するという利点がある。一方で「SCSSの方がCSSに近いためコーディングがはかどるという現場もある」と思うので、一長一短だろう。

 例えば、Sass(SASS記法、SCSS記法)とCSSのコードの違いは以下の通りだ

body
  color: #000
.sass
body{
	color:#000;
}
.scss

 これをコンパイラーに通すと、下記のように変換される。

body {
  color:#000;
}
.css

 SCSS記法とSASS記法の違いをまとめると、以下の表の通りだ。

SCSS記法とSASS記法とCSSの違い
SCSS記法 SASS記法 CSS
波括弧{} 必要 不要(半角スペース2文字のインデントでブロックを表す) 必要
セミコロン; 必要 不要 必要
: の後にスペース 不要 必要 不要
ミックスイン @mixin = なし
インクルード @include + なし
拡張子 .scss .sass .css

 最近は、SCSS記法が主流となっているので、本連載では、主にSCSS記法を扱っていくが、SASS記法の詳細が気になる方やSassの由来などについては、記事「SassでCSSの弱点を克服しよう」を参照してほしい。

 Sassには、このようなCSSの記述を簡略化する機能だけではなく、CSSの記述の負担を少なくして作業をはかどらせたり、CSSファイルの実行速度を上げたりする、さまざまな機能がある。本稿では、代表的な10の機能を紹介しよう。

       1|2|3 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

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

メールマガジン登録

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