compass を触っていた。なんとなくしか知らなかった css, less, scss(sass) 辺りの違いから入って、compass の公式ページをひと通り見て、結局 rails で使ってしまうのが総合的に見て楽そう (asset pipline) だなあという感触だった。

そういうわけで、少しだけ css 界について知ることが出来た。

自分は sass, compass を選択した。

gem 'sass-rails'
gem 'compass-rails'

だ。ベースとなる sass ファイルの頭で

@import "compass/utilities"
@import "compass/css3"
@import "compass/reset"

している。compass の簡単な例として clearfix のものが以下。 たとえば

• html

  #wrapper #main #side

• sass

  #wrapper padding: 10px background: #aaa

  #main float: left width: 60% height: 200px background: #5ce

  #side float: right width: 36% height: 200px background: #5ce

これは wrapper の背景から main, side がはみ出している例。 commpass でこう include すると

#wrapper
  padding: 10px
  background: #aaa
  @include clearfix

こんな css になっている。

#wrapper
  padding: 10px
  background: #aaa
  overflow: hidden
  *zoom: 1

こういったものを良い感じに用意してくれている css フレームワークなのだった。 なるべくマシなデザインで、素早く開発する夢を見ている。小さく一歩前進した。

• 2014/05/13 08:01:01

ちょっと追記。こう、下に footer みたいなのを置けると、margin-topプロパティを自動的に浮動化されたボックスの高さまで調整するような振る舞いをするらしく、問題は起こらない。ということとかも知ったのであった。

#wrapper
  #main
  #side
  .clear

.clear
  clear: both
  height: 60px
  background: #e58