『はじめる!Rails3 (1)』をRails 3.1で読み進めるときのポイント その2

前回の続き。『はじめる!Rails3(1)』(黒田努 著 / 達人出版会)をRails 3.1で読む場合のポイントについて。

7.3 スタイルシートの作成

書籍では public/stylesheetstasks.css を作成するように記述されているが、これも前回の画像ファイルと同じで assets/stylesheets に配置する。また、tasks.css を自分で作成するのではなく、既に用意されている tasks.css.scss に記述する。

scss (Sassy CSS)は、CSSの文法に限りなく近づけつつ新たな文法を導入して拡張したもの。Rails 3.1から標準で入った。

CSSと互換性があるため、書籍の記述の通りに

table.tasks {
  width: 560px;
  margin: 5px auto;
  background-color: #eee;
  border-collapse: collapse;
  border-spacing: 0;
}

table.tasks tr {
  border: solid 1px #ccc;
}

table.tasks td {
  padding: 5px;
}

table.tasks col.name {
  width: 320px;
}

table.tasks col.due_date {
  background-color: #ddd;
}

とも書けるが、次のように書く事もできる。

table.tasks {
  width: 560px;
  margin: 5px auto;
  background-color: #eee;
  border-collapse: collapse;
  border-spacing: 0;

  tr {
    border: solid 1px #ccc;
  }
  td {
    padding: 5px;
  }
  col.name {
    width: 320px;
  }
  col.due_date {
    background-color: #ddd;
  }
}

table.tasksの中にネストする事で冗長な記述を省略でき、少しスッキリする。

ここまでのポイントで、Rails 3.1を使用した場合もとりあえずエラーが出ずに進められるはず。

コメントを残す

メールアドレスが公開されることはありません。

*