Question

如果我有结构：

<div class="container">
  <div class="row">
    <div class="col-md-8 first">
       <h2>List</h2>
    </div>
    <div class="col-md-4 second">
       <h3>Examples</h3>
    </div>
  </div>
</div>

我想在.row中添加背景色，在h2中添加字体颜色，所以我应该在SASS中进行：

.container {
   .row {
       background-color: red;
       .first {
           h2 {
              color: green;
           }
       }
   }
}

或：

.container {
   .row {
       background-color: red;
   }
   h2 {
       color: green;
   }
}

？

我对CSS和SASS不太了解，但是我想正确地做到这一点。

Answer 1

没有完美的方法。
但是，我建议您仅在以下情况下使用嵌套规则：

修饰符
状态
父选择器
媒体

1。修饰符

.btn {
  // some syle

  &--red {
    color: red;
  }
}

2。国家

.card {
  // some syle

  &:hover {
    border: solid 1px #222;
  }

  &.is-active {
    // some style
  }
}

3。父选择器

.primary-nav {
  // some syle

  .header & {
    height: 100%;
  }
}

4。媒体

.video-cover {
  // some syle

  @media screen and (max-width: 1024px) {
    display: none;
  }
}

Answer 2

这两种方法均有效。我建议采用第一种方法，因为如果您有一个不同的.container碰巧也包含一个h2（不是您想要的那个），它也将以此为目标。

如果您不太担心特异性...我仍然建议第一种方法，仅仅是因为它更容易理解什么是什么。如果您以后要重新使用它，那么只要知道所有内容，就会容易得多。

输入的内容似乎要多得多，但是任何出色的代码编辑器（Sublime Text，Atom，VS Code）都应具有自动完成功能和其他类似工具，以使其变得更容易。

再说一遍，因为您是新来的：StackOverflow并不是真正提出关于正确代码编写方式的问题的地方。在Code Review上最好解决这个问题。当您遇到无法正常使用的代码问题时，StackOverflow更适合。

祝你好运！

如何深度嵌套样式？

2 个答案: