Css @伪元素的mixin可能

我需要在我正在工作的项目上支持伪元素的新旧声明。我想创建一个SCSS

@mixin

，这样我就不必重复我自己了

我希望实现以下目标：

声明：

.selector {
  &#{$before} {
    content: '';
  }
}

汇编：

.selector:before { content: ''; }
.selector::before { content: ''; }

因此，我基本上需要

@mixin

来扩展

:before

和

:before

后面的任何css属性

我到处寻找，没有找到解决办法。他们的巫师能让我的梦想成真吗

提前谢谢你

给你，巴德：

@mixin pseudo-element($element) {
  &:#{$element}, &::#{$element} {
    @content;
  }
}

// Usage:

.foo {
  @include pseudo-element('before') {
    content: '';
  }
}

输出：

.foo:before, .foo::before {
  content: '';
}

---

代码笔：

您好。哇！由于某种原因，我在学习中错过了

@content

SCSS声明。这（再次）改变了一切。我唯一改变的是您用逗号分隔了每个伪元素，我的理解是它们需要分开，这样不识别

：before

的浏览器也不会忽略

：before

：。谢谢你，不用担心！是的，你所做的改变是正确的，我忘记了在使用两者结合逗号（参考：）时会有一些问题。为确认干杯。非常感谢。