html - 我可以在 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
        }
    }

但是 parent 重复了一遍，我明白了:

输出

.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;
}