Question

如果我采用这种编码方式，对于“产品”的脚手架，我将其添加到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！ - 但是在迈克尔哈特尔的书中，他正在做一些传统的CSS嵌入。哪一个更好？

Answer 1

这更像是一个CSS问题。

为CSS3提出了嵌套的CSS选择器，但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>

Rails和SCSS协同工作

1 个答案: