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

Syntactically Awesome StyleSheets

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

maedana
SonicGarden
SUG(SKIP User Group)/日本Hamlの会

2009/5/22

Railsを使ったWebアプリケーション開発で、プログラマやデザイナを悩ませるものの1つがスタイルシートの記述だろう。Sassを使って、“クールで構造化された”スタイルシートを記述してみよう(編集部)

かっこいい構文のスタイルシート?

 Sassとは、Syntactically Awesome StyleSheetsの頭文字を取ったものです。あえて日本語に訳すと、「かっこいい構文のスタイルシート」といった感じでしょうか。

 もう少しシンプルに表現すると「クールなCSS(Cascading Style Sheets)」でもいいかもしれません。Sassはスタイルシートを簡潔に表現するためのメタ言語であり、同時にSassからCSSを生成するための便利なライブラリやコマンドラインツールを提供します。

 Sassを使うと、CSSをそのまま記述する場合と比較して以下のようなメリットがあります。

  • CSSよりもシンプルな記法で、CSSを構造化して表現できる
  • CSSとは異なり、書き手による構文のゆれが発生しない
  • CSSには存在しない強力な機能(「定数」や「Mixins」など)をうまく使うことで、CSSのメンテナンス性が大幅に向上する
  • Ruby on RailsやMerbといったRuby製のフレームワークとの連携が容易
  • CSSの出力形式を柔軟に選択できる

 Sassは、HamlというRubyライブラリ(RubyGems)の一部として提供されます。そのため、Sassのインストールとは、すなわちHamlをインストールするということになります。Sassをインストールすることで、SassファイルからCSSを生成するためのコマンドラインツールも同時にインストールされますので、普段Rubyを使っていない方でもCSSのジェネレータとして利用することができます。特にCSSのメンテナンスにお困りの方やこれから新規にCSSを作成していかなければいけないような方に最適です。

 RubyGemsですのでインストールには、RubyおよびRubyGemsが必要です。本稿ではRubyおよびRubyGemsはすでにインストールされているものとします。参考までに筆者の環境では、RubyおよびRubyGemsは以下のようなバージョンがインストールされています。

% ruby -v
ruby 1.8.7 (2008-08-11 patchlevel 72) [i686-linux]
% gem -v
1.3.1

 Sass(Haml)をインストールするには次のコマンドを実行します。

% gem install haml

 インストールに成功すると、同梱のコマンドラインツールであるsassコマンドが使えるようになります。以下のようにHamlのバージョンが表示されれば正しくインストールできています。

% sass -v
Haml 2.0.9

Sassの基本を押さえよう

 まず、具体的なSassの使い方をみてみましょう。リスト1は簡単なCSSです。このCSSをSassで表現するとリスト2のようになります。

●リスト1
.link {
  color: #0080DD; }

.link:hover {
  color: blue; }
●リスト2
.link
  :color #0080DD
.link:hover
  :color blue

 CSSとは少し記述が違うことに気が付くでしょうか。後ほど詳しく説明しますが、Sassではセミコロンや{ }が不要です。{ }の代わりに、半角スペース2文字のインデントで構造を表現します。また、コロンは属性の後ろではなく、属性の前に記述します。

 それでは、リスト2のSassファイルを利用して、CSSを生成してみましょう。CSSを生成するには、前述したコマンドラインツールでの利用を含めて、主に3種類の使用方法があります。

  1. SassをRubyコードの一部に組み込んで使う
  2. Sassのコマンドラインツールを利用する
  3. SassをRuby on Railsのプラグインとして利用する

●SassをRubyコードの一部に組み込んで使う

 Rubyコードを用いて、SassのテキストからCSSを生成することができます。リスト2のSassのテキストをirbを利用してCSSにする方法を以下に示します。

irb(main):001:0> require 'rubygems'
=> true
irb(main):002:0> require 'sass'
=> true
irb(main):003:0> sass_text = ".link\n  :color #0080DD\n.link:hover\n  :color blue"
=> ".link\n :color #0080DD\n.link:hover\n  :color blue"
irb(main):005:0> puts sass_text
.link
  :color #0080DD
.link:hover
  :color blue
=> nil
irb(main):006:0> css_text = Sass::Engine.new(sass_text).render
=> ".link {\n  color: #0080DD; }\n\n.link:hover {\n  color: blue; }\n"
irb(main):007:0> puts css_text
.link {
  color: #0080DD; }

.link:hover {
  color: blue; }
=> nil

●Sassのコマンドラインツールを利用する

 sassコマンドを用いることで、SassのテキストからCSSを生成できます。この方法を用いる場合、Rubyの知識は不要です。まず、リスト2のテキストファイルを作成し、sample1.sassとして保存してください。

 sassコマンドでは、生成するCSSの出力形式を指定することができます。具体的には、sassコマンドの-tオプションで、nested、expanded、compact、compressedの4種類が指定できます。各出力形式の簡単な説明は以下のとおりです。

nested:
-tオプションを指定しない場合のデフォルト値です。Sassファイルのネストの深さが引き継がれます。リスト3のように出力されます。
expanded:
典型的なCSSの記述スタイルです。リスト4のように出力されます。筆者の経験上、最もよく見かける記述スタイルで、可読性も高いです。
compact:
セレクタと属性を1行で記述するスタイルです。リスト5のように出力されます。このスタイルを好む方がいらっしゃるようですが、筆者の経験上、可読性は低いといわざるを得ません。
compressed:
最もコンパクトなスタイルです。リスト6のように出力されます。もはや人が読むものではありません。運用環境などで少しでもCSSのサイズを圧縮する必要がある場合に限って使うべきでしょう。

 このような柔軟な出力形式のおかげで普段の開発では可読性の高いSass形式で記述し、実際に使われるCSSには可読性は期待できないがサイズの小さいcompressedを利用するといったことが可能になるのもSassの魅力です。

●リスト3 nested
% sass sample1.sass -t nested
.link {
  color: #0080DD; }

.link:hover {
  color: blue; }
●リスト4 expanded
% sass sample1.sass -t expanded
.link {
  color: #0080DD;
}
.link:hover {
  color: blue;
}
●リスト5 compact
% sass sample1.sass -t compact
.link { color: #0080DD; }

.link:hover { color: blue; }
●リスト6 compressed
% sass sample1.sass -t compressed
.link{color:#0080DD}.link:hover{color:blue}

●SassをRuby on Railsのプラグインとして利用する

 SassをRuby on Railsのプラグインとして利用する方法です。まず、以下のコマンドを実行します(path/to/rails/appは既存のRailsアプリケーションへのパスに読み替えて下さい)。

% haml --rails path/to/rails/app

 Railsアプリケーションをdevelopmentモードで再起動後、リスト2のテキストファイルを#{RAILS_ROOT}/public/stylesheets/sass/sample1.sassとして作成します。これで、/stylesheets/sample1.cssにアクセスがあると自動的にコンパイルされてsample1.cssが生成されます。

 各種カスタマイズはSass::Plugin.optionsをenvironment.rbなどで設定します。例えば、出力をcompactにするにはリスト5をenvironment.rbなどに記述し、Railsアプリケーションを再起動します。より詳しい情報は本家ドキュメントを参照して下さい。

Sass::Plugin.options[:style] = :compact

 次項からはいよいよSassの詳細な文法や、冒頭で触れた「定数」や「Mixins」などのSass独自の機能について解説します。今後の解説では、原則としてコマンドラインツール(sassコマンド)を利用する方法を用いて解説をしますので、RubyやRuby on Railsがよく分からない方でも読み進めていただければ、Sassを使いこなせるようになると思います。

 
1/2
next

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

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


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

注目のテーマ

>

Coding Edge 記事ランキング

本日 月間