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 回答