如何在结尾处引用父选择器？

Question

我该怎么做呢：

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

到

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

在.dropdown-toggle

之后，我一直收到无效的选择器

Answer 1

如果您阅读完整错误，则应说明：

  

＆＃34;＆安培;＆＃34;只能在复合选择器的开头使用。

但是，.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; }
}

Answer 2

没有冒犯，但我不确定你是否理解&使用的是什么..以防万一我就在这里是解释：

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

示例：

p{
    background: red;

    &:hover{
        background: blue;
    }

    &:active {
       background: blue; 
    }
} 

将转换为：

p {
    background:red;
}

p:hover {
    background:red;
}

p:active {
    background:red;
}