我可以在 SASS 中添加一个元素吗？答案

【问题标题】：Can I Prepend an Element in SASS?我可以在 SASS 中添加一个元素吗？
【发布时间】：2018-12-17 23:22:17
【问题描述】：

我知道在 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 内心深处不理解它。或者我需要更好地格式化它......

我需要这个，因为我正在处理一些代码，其中一个选择器出现在页面中，但它经常被分配给一个锚标记......

任何帮助或建议将不胜感激？

【问题讨论】：

标签： html css sass

【解决方案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;
}

【讨论】：