@mixin 可以用于伪元素

Question

我需要在我正在处理的项目中支持伪元素的新旧声明。我想创建一个 SCSS @mixin，这样我就不必重复自己了。

我想要实现以下目标：

声明：

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

编译：

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

所以我本质上需要@mixin 到@extend 任何:before 和::before 后面的css 属性。

我搜索了高低，但没有找到解决方案。他们的任何 Sass 巫师都能让我的梦想成为现实吗？

提前谢谢你

Answer 1

你来了，芽：

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

// Usage:

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

输出：

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

代码笔：https://codepen.io/esr360/pen/VzVBpj