Hatena::ブログ(Diary)

ursmの日記

2008-08-31

Sass で CSS をすっきり記述する

Haml には Sass というモジュールが含まれています。先日の Rails Summer Festival では時間の都合上削らざるを得なかったのですが、これもなかなか面白いのでご紹介させていただきます。

Sass とは

http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html

Sass は CSS を生成するためのメタ言語です。CSS はいかんせん記述力が低いため、あっという間にメンテナンス不能な状態に陥りがちですが、Sass を使うと上手い具合に構造化して記述することができます。

インストールと使い方

Haml と同じパッケージになっています。

$ gem install haml
$ haml --rails path/to/rails_app

#{RAILS_ROOT}/public/stylesheets/sass/hoge.sass というファイルを置いておくと、/stylesheets/hoge.css へアクセスがあった時に自動的にコンパイルして CSS ファイルを生成してくれます。

ちなみに Haml を使わずに Sass だけ使うことも可能です。既存の CSS ファイルと混ぜても OK です。

文法

セレクタに対してプロパティと値をネストさせます。Haml と同様にインデントで範囲を表現します。

body
  :background-color black
  :color white
body {
  background-color: black;
  color white;
}
ネストしたルール

ネストした要素に対するスタイルをそのまま書き下すことができます。

.block h1
  :font-size large

  strong
    :color red
.block h1 {
  font-size: large;
}

.block h1 strong {
  color: red;
}
親ルールの参照

& で親ルールのセレクタを展開することができます。

.nav ul li a
  :font-color blue

  &:hover
    :font-color red
.nav ul li a {
  font-color: blue;
}

.nav ul li a:hover {
  font-color: red;
}
.notice
  :color gray

  ul& li
    :list-style-image url(notice.png)
.notice {
  color: gray;
}

ul.notice li {
  list-style-image: url(notice.png);
}
属性ネームスペース

同じプレフィックスのプロパティをまとめて記述することができます。

dt
  :font
    :size large
    :weight bold
dt {
  font-size: large;
  font-weight: bold;
}
定数

何度も使う値を定数として括り出すことができます。これでページの基本色を変えるたびに grep しなくて済みますね!

!margin = 3em
!color = silver

p
  :margin-left = !margin
  :background-color = !color
p {
  margin-left: 3em;
  background-color: #c0c0c0;
}
値の演算

文字列や数値や色を演算して求めることができます。

ul li
  :margin-left = (1 + 2) + em
ul li {
  margin-left: 3em;
}
!base = red

.light
  // 明るめの赤
  :color = !base + #333

.dark
  // 暗めの赤
  :color = !base - #333
.light {
  color: #ff3333;
}

.dark {
  color: #cc0000;
}
Mixin

プロパティをまとめたものに名前を付けて取り込むことができます。

=radius-top
  :-moz-border-radius
    :topleft 4px
    :topright 4px

.tab
  +radius-top
.tab {
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
}

まとめ

CSS ってちょっと書くだけならともかく、メンテナンス性を保ちながら拡張していくことを考えるととても難しいものです。私自身かなり苦手意識を持っていたのですが、Sass を使うことで「書ける! 私にも書けるぞ!」と思えるようになりました。

皆さんも Haml と Sass で楽しい Rails ライフをお過ごしください。

babydaemonsbabydaemons 2009/09/29 16:51 お世話になります。
Sassを記述する上でお勧めのエディタ・IDEなどありますか?

ursmursm 2009/09/30 00:21 こんにちはこんにちは!
私は Vim + vim-haml で書いています。特に入力支援などはしてくれませんが、色が付くだけでかなり快適なものです。
http://d.hatena.ne.jp/ursm/20090121/1232546401

Emacs なら sass-mode.el が Haml の gem に入ってます。作者が作っているものなので、多分便利なのでしょう。
IDE は使ったことがないのでわからないです。

babydaemonsbabydaemons 2009/09/30 16:26 こんにちは!
ぐぐってみたら自己解決しました。
http://www.atmarkit.co.jp/fcoding/articles/sass/sassb.html
NetBeansはサポートしてるようです。

vimっていろんなファイルを色づけ表示してくれて何気に強力ですよね。
viを使うことはぜんぜん平気だけど、どこかのタイミングで
vimカスタマイズ入門したいです。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証