我可以。在SASS中，我可以加入一个元素吗？

Question

3

我明白在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本质上并不理解它...或者我需要更好地格式化它...

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

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

- Takuhii

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user4994625 · Accepted Answer

我尝试使用插值:

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