@mixin可能用于伪元素

时间:2017-08-30 05:04:05

标签: css sass

我需要在我正在开发的项目上支持伪元素的新旧声明。我想创建一个SCSS @mixin,使我不必重复自己。

我想要实现以下目标:

声明:

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

编译:

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

所以我基本上需要@mixin@extend以及:before跟随::before[[i for i in instance if i < tolerance] for tolerance in distance_tolerance] 的任何css属性。

我已经搜索过高低,没有找到解决方案。他们的任何Sass巫师能够让我的梦想成真吗?

提前谢谢

2 个答案:

答案 0 :(得分:3)

在这里你萌芽:

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

// Usage:

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

输出:

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

CodePen:https://codepen.io/esr360/pen/VzVBpj

答案 1 :(得分:0)

@mixin pseudo($display: block, $pos: absolute, $content: ''){
    content: $content;
    display: $display;
    position: $pos;
}

当使用 ::before 和 ::after 时,你总是需要这三个,所以每次你使用它时我们都会节省两行代码。

div::after {
    @include pseudo;
    top: -1rem; left: -1rem;
    width: 1rem; height: 1rem;
}