0

このスタイルのコーディングを使用する場合、「製品」の足場としてこれを applications.html.erb に追加します。

<body class = '<%= controller.controller_name %> ' >

次に、products.css.scc のスタイルシートで、「products」に対して次のようにネストして定義します。

.products {
  table {
    border-collapse: collapse;
  }

  table tr td {
    padding: 5px;
    vertical-align: top;
  }

  .list_image {
    width:  60px;
    height: 70px;
  }

  .list_description {
    width: 60%;

    dl {
      margin: 0;
    }

    dt {
      color:        #244;
      font-weight:  bold;
      font-size:    larger;
    }

    dd {
      margin: 0;
    }
  }
// .... continued...

そして、たとえば products/index/index.html.erb<td class = "list_description" > では、...のようなものを持つことができます

だから私の質問は、そのcssファイルのネストされたクラスにアクセスするには、ある種の完全修飾命名が必要ですか? または、階層なしで名前を付けることができますか?

私は DHH のアジャイル本で CSS を行うこの方法を見ました - 彼は Rails を作成しました! - しかし、Michael Hartl の本では、CSS の埋め込みについてもう少し伝統的な方法で行っています。それで、どちらが良いですか？

4

1 に答える 1

1

これはCSSの質問です。

ネストされたCSSセレクターがCSS3用に提案されていますが、Sassがそれらを処理します。彼らがしているのは、別の要素の下でセレクターを「名前空間」しているということです。つまりclass="list_description" 、要素内にある限り、次の要素を使用できます。 class="products"

言い換えると、Sassは上記をこの同等のルールに変換します。

.products .list_description {
  width:60%;
}

これに一致します：

<div class="products">
  <div class="list_description">Matches</div>
</div>

しかし、これではありません：

<div class="products"></div>
<div class="list_description">Does not match: not inside a "products" classed element.</div>
于 2013-01-26T17:56:23.060 に答える