我可以在SASS中添加元素吗？

Question

据我所知，在SASS我可以做到这一点;

h3 {
  font-size: 20px
  margin-bottom: 10px

  .some-parent-selector & {
        font-size: 24px
        margin-bottom: 20px
  }
}

生成此代码;

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

有谁知道我如何通过元素实现这一目标？基本上我想在SASS中做到这一点;

.some-parent-selector {
    font-size: 24px
    margin-bottom: 20px

    a& {
        ...
    }
}

生成此代码;

.some-parent-selector {
    font-size: 24px
    margin-bottom: 20px
}
a.some-parent-selector {
    ...
}

我看到一个问题，我只能在元素和＆符号之间放置一个空格。如果我没有linter失败，但我想深入SASS不理解它..或者我需要更好地格式化它...

我需要这个，因为我正在使用一些代码，其中一个选择器出现在页面中，但每隔一段时间它就被分配给一个Anchor标签......

非常感谢任何帮助或建议？

Answer 1

我尝试使用插值：

<强> SASS

  .some-parent-selector {
        font-size: 24px;
        margin-bottom: 20px;

       a#{&}{
            margin-bottom: 20px
        }
    }

但是父母重复了，我明白了：

<强>输出

.some-parent-selector {
  font-size: 24px;
  margin-bottom: 20px;
}
.some-parent-selector a.some-parent-selector {
  margin-bottom: 20px;
}

所以我用@at-root指令从父母那里提取选择器：

<强> SASS

.some-parent-selector {
    font-size: 24px;
    margin-bottom: 20px;

   @at-root a#{&}{
        margin-bottom: 20px
    }
}

<强>输出

.some-parent-selector {
  font-size: 24px;
  margin-bottom: 20px;
}
a.some-parent-selector {
  margin-bottom: 20px;
}