scss書いてみる

projectの名前はSass。最近までのファイル拡張子は.sass。ver3以降は拡張子が.scssになって、かなり書法が変わった、と。

なるほどなるほど。
今日はけっこうじっくりとSassの本家のドキュメントを読む。わ、そうだったのか。railsでhamlといっしょに使うときは、public/stylesheet/sass以下にhoge.scssを置いておけば、自動的にstylesheet/以下にhoge.cssにコンパイルして保存されるのか。

というわけで試しにstyle.scssとかをでっちあげて書いてみる。

#navbar {
    width: 100%;
    height: 23px;
    background-color: #888;
    ul { list-style-type: none; }
    li {
        float: left;
        a { font-weight: bold; }
    }

}
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;       
    }
  }

こんな感じね。これはsassの本家サイトからカットアンドペーストしてます。(^^;)これが

#navbar {
  width: 100%;
  height: 23px;
  background-color: #888; }
  #navbar ul {
    list-style-type: none; }
  #navbar li {
    float: left; }
    #navbar li a {
      font-weight: bold; }

.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; }

こうなると。
うーん、sassのほうが簡潔でrubyっぽい感じがしますな。でもわかりやすくcss書法から移行しやすいのはscssでしょうかね。

emacsで編集していると、stylesheet/sass以下にstyle.cssがコンパイルされて保存されるのが若干余計な感じ。ま、それくらいいいとしよう。

さらにblueprintもどうせなら使いたいなあ、と考えて調べたら、ちゃんと blueprint-grid-sass-mixinとうのがありました。これは明日以降。