『Ruby on Rails チュートリアル』「第5章レイアウトを作成する」１

railstutorial.jp

序文

Railsチュートリアル10日目。

Railsの基本部分はいろいろな書籍で勉強していたんですが、まだまだ理解していない機能がでてきておもしろいですね。
改めて奥が深いなぁと思います。大変だけど…。

進捗

• 第5章レイアウトを作成する
  • 5.1 構造を追加する
  • 5.2 Sassとアセットパイプライン

コード実装部分（一部）

/sample_app/app/assets/stylesheets/custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";

/* mixins, variables, etc. */
$gray-medium-light: #eaeaea;

/* universal */
body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: $gray-light;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: white;
    text-decoration: none;
  }
}

img {
  display: none;
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a{
    color: $gray;
    &:hover{
      color: $gray-darker;
    }
  }
  small{
    float: left;
  }
  ul{
    float: right;
    list-style: none;
    li{
      float: left;
      margin-left: 15px;
    }
  }
}

GitHub

github.com

実行結果

感想

.scssは.cssを拡張した形式で、CSSをネストさせる書き方や

$gray-medium-light: #eaeaea;

みたいに変数を扱うことができるらしい。

すごくプログラマっぽい発想だなと思う。

いまだによくわかってないのだけど、CSSのクラス名やid名は「HTML内の構造」にすべきなのだろうか、「実際の機能」にすべきなのだろうか。
上のCSSでも両方が混在（.centerは機能だろうが、#logoは構造を元にした命名だろう）している気がするのだが、どのように考えて書くのが一番すっきりするのかよく分かっていない。

カロリーメイトください。

大塚製薬 カロリーメイト ブロック メープル 4本×10個

BGM

テテテテテン / タルトタタン
www.youtube.com