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種類の使用方法があります。

SassをRubyコードの一部に組み込んで使う
Sassのコマンドラインツールを利用する
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

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

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

Coding Edge フォーラム新着記事

プログラムの実行はどのようにして行われるのか、Linuxカーネルのコードから探る （2017/7/20）
　C言語の「Hello World！」プログラムで使われる、「printf()」「main()」関数の中身を、デバッガによる解析と逆アセンブル、ソースコード読解などのさまざまな側面から探る連載。最終回は、Linuxカーネルの中では、プログラムの起動時にはどのような処理が行われているのかを探る
エンジニアならC言語プログラムの終わりに呼び出されるexit()の中身分かってますよね？ （2017/7/13）
　C言語の「Hello World！」プログラムで使われる、「printf()」「main()」関数の中身を、デバッガによる解析と逆アセンブル、ソースコード読解などのさまざまな側面から探る連載。今回は、プログラムの終わりに呼び出されるexit()の中身を探る
VBAにおけるFileDialog操作の基本＆ドライブの空き容量、ファイルのサイズやタイムスタンプの取得方法 （2017/7/10）
　指定したドライブの空き容量、ファイルのタイムスタンプや属性を取得する方法、FileDialog／エクスプローラー操作の基本を紹介します
さらば残業！　面倒くさいエクセル業務を楽にする「Excel VBA」とは （2017/7/6）
　日頃発生する“面倒くさい業務”。簡単なプログラミングで効率化できる可能性がある。本稿では、業務で使うことが多い「Microsoft Excel」で使えるVBAを紹介する。※ショートカットキー、アクセスキーの解説あり