【学習メモ】Railsチュートリアル第５章5.2.2演習

演習＜footer用CSSをSassを使ってネストする＞

演習
5.2.2で提案したように、footerのCSSを手作業で変換してみましょう。具体的には、リスト 5.16の内容を1つずつ変換していき、リスト 5.19のようにしてみてください。

学習メモ

・共通パターンがある
→ネスト

・2重に定義する箇所がある場合
（例hoverなど、「もし〇〇が～～したら」のイメージ）
→「&:」をつけてネスト

↓元のコード

・こちらを後ほど記載する「解答」と同じ状態に手作業で変換します
・今回は「編集用」に変換した内容を記載し、「解答」と見比べます

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a {
  color: #555;
}

footer a:hover {
  color: #222;
}

footer small {
  float: left;
}

footer ul {
  float: right;
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 15px;
}

↓編集用

・記憶を頼りに変換をしてみました

$gray-white: #eaeaea;
$gray-light: #777;
$gray-midium: #555;
$gray-dark: #222;

/* footer */

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

↓解答

/* 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;
    }
  }
}

「編集用」と「解答」との差分

・編集用では「&:」を多用しすぎ
→
再度Railsチュートリアルの説明を確認したところ、
重複して定義する場合に使う様子。
単純に共通する箇所がある場合には使わないように注意したいと思います。

イメージ

footerのulについて
→ネスト
もしfooterがhoverした場合の定義をしたい
→「&:」を使う

上記を踏まえて再度編集しました。↓

$gray-white: #eaeaea;
$gray-light: #777;
$gray-midium: #555;
$gray-dark: #222;

/* footer */

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

結果

上記へ変更したところ、正常に反映できました！

当然ながらカラーコードの定義名は見本（「解答」）とは異なりますが、
解答と同じ表示になり、満足しました！

インデントのつけ方も徐々に感覚をつかめてきており
解答と似た状態にできたのも嬉しかったです！

引き続きRailsチュートリアルを進めながら理解を深めていけたらと思います。