sassがLESSがどうのと前々から言われていたけども僕はさっぱり1mmも試したこと無かったので試した。なんかcompassというやつがいいとのことで、インストールした。

どこぞのサイト見つつ

compass create

とかやったら

.
├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

ができた。config.rbが設定ファイルで、基本この中をいじれば設定が変えられる。画像のパス指定先とか。そんで、

compass watch

とかやると、sassディレクトリ内のファイル更新に合わせてcssファイルをstylesheetsディレクトリに作ってくれる。

あとは、.scssファイルにsassを書いていけばいいという感じ。別に使いそうなやつだけ覚えればいいでしょと思ったので一通りドキュメントを見て、以下を使いそうっていうメモ。

@import "compass/css3";
@import "compass/typography";

#test1{

  /* css3 things */
  @include border-radius(10px);
  @include box-shadow(red 2px 2px 10px);
  @include inline-block;
  @include opacity(0.5);
  @include single-text-shadow;
  @include transition-property(width);
  @include transition-duration(2s);

  /* typography */
  @include link-colors(red, blue, black, white, white);
  @include nowrap;
  @include force-wrap;

  /* helper */
  background:image-url(hoge) no-repeat 0 0;
  @include clearfix;

}
#test2{
  /* helper */
  @include has-layout;
}

これが、コンパイルされると以下のようになる（以下は僕の方で整形した奴）

#test1 {

  /* ===== css3 things ===== */

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;

  -moz-box-shadow: red 2px 2px 10px;
  -webkit-box-shadow: red 2px 2px 10px;
  -o-box-shadow: red 2px 2px 10px;
  box-shadow: red 2px 2px 10px;

  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;

  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;

  text-shadow: #aaaaaa 0px 0px 1px;

  -moz-transition-property: width;
  -webkit-transition-property: width;
  -o-transition-property: width;
  transition-property: width;

  -moz-transition-duration: 2s;
  -webkit-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;

  /* ===== typography ===== */

  color: red; /* link-colors */

  white-space: nowrap;

  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -hp-pre-wrap;

  word-wrap: break-word;

  /* ===== helper ===== */

  background: url('/images/hoge') no-repeat 0 0;
  overflow: hidden;
  *zoom: 1;

}
#test1 {
  *display: inline; /* inline-block */
}
/* link-colors */
#test1:visited { color: white; }
#test1:focus { color: white; }
#test1:hover { color: blue; }
#test1:active { color: black; }

/* ===== helper(has-layout) ===== */

#test2 { *zoom: 1; }

-webkit-だの-moz-だのはもちろん、opacityだのclearfixだのinline-blockだのはよく使うのでこんだけ覚えておくだけでもなかなか楽になりそう。オプション指定して事項すればminifyみたいのもしてくれるので使ってみる。