SassでCSSの弱点を克服しよう

Syntactically Awesome StyleSheets

SassでCSSの弱点を克服しよう

maedana
SonicGarden
SUG（SKIP User Group）／日本Hamlの会

2009/5/22

Sassの基本文法

　原則として、セレクタに対してプロパティと値を半角スペース2文字のインデントすることで表現します。

　簡潔にまとめると、CSSとは以下のような点で異なります。

  • { }が不要。代わりに半角スペース2文字のインデントを用いる
  • ;（セミコロン）が不要
  • プロパティの後ろではなく先頭に:（コロン）を付ける

　例えば、リスト7のようなSassは、リスト8のようなCSSと同じ表現になります。

●リスト7
body
  :color #fff
●リスト8
body { color: #fff; }

●ネストしたルール

　セレクタをネストして記述すると、以下のように内側のセレクタは外側のセレクタの子供になります。

% cat nested.sass
#main p
  :color #00ff00
  :width 97%
  .redbox
    :background-color #ff0000
    :color #000000
% sass nested.sass -t compact
#main p { color: #00ff00; width: 97%; }
#main p .redbox { background-color: #ff0000; color: #000000; }

●親ルールの参照

　&で親のセレクタを展開できます。以下では、&によって親のセレクタである［.rebox］が展開される様子が分かります。

.redbox
  :background-color #ff0000
  div&
    :color #f6f6f6
% sass referencing_parent_rule.sass -t compact
.redbox { background-color: #ff0000; }
div.redbox { color: #f6f6f6; }

●属性ネームスペース

　同一ネームスペースのプロパティ、例えば共通の［font］というネームスペースのプロパティであるfont-familyとfont-sizeなどをネストして記述できます。

% cat attribute_namespaces.sass
.funky
  :font
    :family fantasy
    :size 30em
% sass attribute_namespaces.sass -t compact
.funky { font-family: fantasy; font-size: 30em; }

●CSSに出力しないコメント（Silent Comments）

　以下のように生成されるCSSに含めないコメントを記述できます。

% cat silent_comments.sass
// この行は出力されません
#first.rule
  // この行も出力されません
  :width 100%
#second.rule
  // 複数行のコメントを書きたい場合はネストして書きます
    2行め
    3行め
  :width 99%
% sass silent_comments.sass
#first.rule {
  width: 100%; }

#second.rule {
  width: 99%; }

●CSSに出力するコメント(Loud Comments)

一方、生成されるCSSにコメントを含める記述もできます。

% cat loud_comments.sass
/* この行は出力されます
#first.rule
  /* この行も出力されます
  :width 100%
#second.rule
  /* 複数行のコメントを出力したい場合はネストして書きます
    2行め
    3行め
  :width 99%
% sass silent_comments.sass
/* この行は出力されます */
#first.rule {
  /* この行も出力されます */
  width: 100%; }

#second.rule {
  /* 複数行のコメントを出力したい場合はネストして書きます
    * 2行め
    * 3行め */
  width: 99%; }

Sass独自の文法―定数

　Sassでは以下の4種類の定数を利用できます。

  • 数値
  • 色
  • 単位（px、emなど）
  • 文字列

　例えば、色の定数定義と参照は以下のようになります。

% cat arithmetic_number.sass
% cat constants.sass
!main_color = #00ff00
#main
  :background-color = !main_color
% sass constants.sass -t compact
#main { background-color: #00ff00; }

●定数の演算（数値と単位）

　Sassでは数値や単位の演算が可能です。例えば、以下のように演算の様子が確認できます。

% cat arithmetic_number.sass
!main_width = 10
!unit1 = em
!unit2 = px

#main
  p.foo
    :width = !main_width + !unit1
  p.bar
    :width = (!main_width + 15) + !unit2
  p.baz
    :width = (!main_width / 5) + px
% sass arithmetic_number.sass -t compact
#main p.foo { width: 10em; }
#main p.bar { width: 25px; }
#main p.baz { width: 2px; }

●定数の演算（色）

　Sassでは、色に対しての演算が可能となっています。筆者は16進数を見ても、どれが何色かほとんど分かりません。しかし、この仕組みを使えば、背景色より少し濃い罫線を作るといったことが簡単に実現できるので重宝しています。

　具体例を示します。!base_colorで定義した#cccから#333を減算することで、少し濃い#999を算出しています。これは簡単な例ですが、うまく使えば基本色を変更するだけでサイト全体の色を調節するといったことも可能になるでしょう。

% cat arithmetic_color.sass
!base_color = #ccc
div.foo
  :color = !base_color
  :border = 1px solid (!base_color - #333)
% sass arithmetic_color.sass -t compact
div.foo { color: #cccccc; border: 1px solid #999999; }

Sass独自の文法―Mixins

　SassにはMixinsという文法もあります。Mixinsを利用することで、CSSの定義をグループ化し、再利用することが可能となります。

　Mixinsの定義は=で行い、+で任意の場所で利用できます。筆者はSassにおける最も特徴的で非常に強力な機能だと考えています。

　以下に具体例を示します。=large-textでフォントに関するCSSをグループ化し、.page_titleセレクタの中にMixinしています。複数のセレクタに共通するスタイルのグループに名前を付けて分離するなど、うまく利用すればCSSのメンテナンス性を大きく向上させることができるでしょう。

% cat mixins.sass
=large-text
  :font
    :family Arial
    :size 20px

.page-title
    :color #fff
    +large-text
% sass mixins.sass
.page-title {
  color: #fff;
  font-family: Arial;
  font-size: 20px; }

いくつかのTipsとまとめ

●Sassを利用する上での便利なソフト

　筆者はVimというエディタを常用しているため、以下で紹介するVimプラグインを愛用しています。筆者は利用したことがありませんが、EmacsやNetBeansでもSassをサポートしています。これらのエディタやIDEをご利用の方は試してみるとよいでしょう。

●既存のCSSをSass化する方法

　Hamlをインストールすることで、css2sassというコマンドが利用できます。リスト9のようなファイルsample1.cssがある場合、リスト10のようにして使います。

●リスト9　sample1.css
.link { color: #0080DD; }

.link:hover { color: blue; }
●リスト10
% css2sass sample1.css
.link
  :color #0080DD

  &:hover
    :color blue

　Sassとは何かからSassの文法まで、駆け足で説明しましたがいかがだったでしょうか。SassとRailsの組み合わせが便利なのはもちろんですが、筆者の個人的な意見としては単純にCSSのジェネレータとして非常に使い勝手がいいと感じています。

　Sassの文法も慣れるまでは戸惑うかもしれませんが、すでに慣れてしまった筆者にとっては手放せないものとなりました。CSSよりも簡潔に記述できるうえ、書き手による構文のゆれも発生しません。定数やMixinなどの強力な機能は、うまく使えばCSSのメンテナンス性が大きく向上するでしょう。

　Sassを導入するにはRubyとRubyGemsが必要ですが、普段お使いの言語やフレームワークに関係なく、CSSのメンテナンスにお困りの方やこれから新規にCSSを作成していかなければいけないような方は一度Sassを試してみてはいかがでしょうか。

　最後に参考文献やWebサイトを示します。

●Sass（Syntactically Awesome StyleSheets）

　本家のドキュメントです。本稿を読んで、Sassに興味をもたれた方はぜひ一読されることをお勧めします。

●日本Hamlの会（通称：日本ハム）

　HamlやSassに関する日本語での情報が満載です。筆者は会長のid:ursm氏のおかげでSassに出会いました。

prev
2/2
  

Index
SassでCSSの弱点を克服しよう
  Page1
かっこいい構文のスタイルシート？
Sassの基本を押さえよう
Page2
Sassの基本文法
Sass独自の文法―定数
Sass独自の文法―Mixins
いくつかのTipsとまとめ

index Coding Edgeフォーラム トップページ


Coding Edge フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

>

Coding Edge 記事ランキング

本日 月間
＠IT