在选择器名称中使用带有SASS的＆符号

Question

这是我在CSS文件中的内容......

.search-doctors-box {
    position: relative;
    z-index: 999;
    margin: 0px;
}

.search-doctors-box--at-map {
    position: absolute;
    margin-bottom: 10px;
    top: 0px;
    left: 415px;
    width: 680px;
}

我想在SASS中使用＆amp;作为父选择器名称并将其与字符串的其余部分...

连接

.search-doctors-box {
    position: relative;
    z-index: 999;
    margin: 0px;

    &--at-map {
        position: absolute;
        margin-bottom: 10px;
        top: 0px;
        left: 415px;
        width: 680px;
    }
}

有可能吗？

谢谢！

Answer 1

不幸的是，您在选择器中与“＆”符号结合使用的内容有限制 - 它需要一个类名（.），一个id（#），伪类（:）或属性选择器（[]） 其他可以与&结合使用的可接受符号是有效的CSS选择器组合器，>，+和~。

---

Sass的解决方案＆gt; = 3.3：

您可以在＆号#{&}上使用字符串插值，然后您可以将其与任何字符串连接。
但是，这种方式（如果您在嵌套规则中执行此操作）嵌套选择器仍会自动获取在开头附加的父选择器：

.parent {
  #{&}--at-map { ... }
}

将返回：

.parent .parent--at-map { ... }

但是，您可以将＆符号的内容保存在变量中，并在父规则之外使用它。所以在你的情况下，这些方面的东西可以起作用：

$last-rule: null;
.search-doctors-box {
  position:relative;
  z-index:999;
  margin: 0px;
  $last-rule: &;
}
#{$last-rule}--at-map {
  position: absolute;
  margin-bottom:10px;
  top: 0px;
  left: 415px;
  width:680px;
}

DEMO

甚至更好，你可以使用

@at-root

使用嵌套的连接选择器，如下所示：

.search-doctors-box {
  position:relative;
  z-index:999;
  margin: 0px;

  @at-root #{&}--at-map {
    position: absolute;
    margin-bottom:10px;
    top: 0px;
    left: 415px;
    width:680px;
  }
}

将为您提供所需的输出：

DEMO