最后如何引用父选择器？ [复制]答案

【问题标题】：How do I reference the parent selector at the end? [duplicate]最后如何引用父选择器？ [复制]
【发布时间】：2014-09-10 13:32:46
【问题描述】：

我怎样才能把这个变成：

.btn-primary {
  .open .dropdown-toggle.btn-primary { ... }
}

进入

.btn-primary {
  .open .dropdown-toggle& { ... }
}

在 .dropdown-toggle 之后我不断收到无效的选择器

【问题讨论】：

标签： sass

【解决方案1】：

如果你阅读完整的错误，它应该是这样的：

“&”只能用在复合选择器的开头。

但是，.dropdown-toggle.btn-primary 与 .btn-primary.dropdown-toggle 相同。所以把父选择器放在开头：

.btn-primary {
  .open &.dropdown-toggle { color: blue; }
}

从 Sass 3.4 开始，您可以这样做：

.btn-primary {
  .open .dropdown-toggle#{&} { color: blue; }
}

【讨论】：

谢谢。我读了错误。但只是没有想到你的解决方案。
如果嵌套规则包含类型选择器并且您希望将其与类连接起来，那么 Sass 3.4 的添加似乎是唯一的解决方案 - 因为类型选择器可能只出现在复合选择器的开头，这意味着在 3.4 之前，这可能根本不可能使用嵌套类型选择器。

【解决方案2】：

无意冒犯，但我不确定你是否理解 & 的用途。以防万一我在这里是解释：

有时以其他方式而不是默认方式使用嵌套规则的父选择器很有用。例如，您可能希望在选择器悬停时具有特殊样式或当 body 元素具有某个类时。在这些情况下，您可以使用 & 字符显式指定父选择器应插入的位置。

例子：

p{
    background: red;

    &:hover{
        background: blue;
    }

    &:active {
       background: blue; 
    }
}

这将被转换成这个：

p {
    background:red;
}

p:hover {
    background:red;
}

p:active {
    background:red;
}

【讨论】：