如何仅在SASS中为主要父母添加某种样式

Question

我有这个标记：

<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
  <li>
    <ul> // w style: border-bottom: 2px solid #aaa;
      <li>
      <li>
    </ul>
  </li>
</ul>

我需要为主要父项添加一些样式，并为上面的同一项继承一个样式（如上）。 所以我这样做，但这是行不通的...

ul {
   border-top: 2px solid #aaa;

   & > {
     border-bottom: 1px solid #ccc;
   }
}

我知道我可以复制标签并在里面为他指定其他样式，但是总的来说这样记录/写入的可能性吗？ 谢谢。

Answer 1

我相信您对嵌套选择器的使用是错误的，它一定是Sass抛出错误。 您已经在包含选择器的别名之后使用了直接后代选择器> ，在本例中为ul ，因此编译的选择器看起来像ul > ，这是无效的。

选择器应遵循以下模式： parent > child 。 您可能正在尝试ul > ul但嵌套ul不是主要ul的直接后代，而是li的子代。

您修改的代码：

ul {
   border-top: 2px solid #aaa;

   & > li > & {
     border-bottom: 1px solid #ccc;
   }
}

但是请注意，此规则也将在以下情况下适用，因此您可能应该在嵌套的ul上上课。

HTML

<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
  <li>
    <ul> // w style: border-bottom: 2px solid #aaa;
      <li>
        <ul> // Another list
          <li></li>
          <li></li>
        </ul>
      <li>
    </ul>
  </li>
</ul>

所以这样会更好

<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
  <li>
    <ul class='sub-list'> // w style: border-bottom: 2px solid #aaa;
      <li>
      <li>
    </ul>
  </li>
</ul>

使用以下css / scss

ul {
  border-top: 2px solid #aaa;
}

.sub-list { /* Will inherit the above if used on a ul */
   border-bottom: 1px solid #ccc;
}