@mixin伪元素可能

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

我想实现以下目标：

声明：

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

编译：

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

所以我基本上是需要遵循的两个@mixin到@extend任何CSS属性:before和::before。

我已经搜索了高和低，没有遇到这个解决方案。他们的任何Sass巫师能够实现我的梦想吗？

预先感谢您

来源

2017-08-30 danMad

在这里你去芽：

@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

来源

2017-08-30 05:11:45

嗨。哇！出于某种原因，我错过了我学习中的'@ content' SCSS声明。这改变了一切（再次）。我只是改变了事实，你用逗号分隔每个伪元素，我的理解是他们需要分开，所以不识别':: before'的浏览器也不会忽略'：before'：https： //codepen.io/anon/pen/MvzBmL。谢谢你。 – danMad

不用担心！是的，你是正确的做出你所做的改变，我忘记了有关使用两者结合使用逗号的问题（参考：https：//stackoverflow.com/a/10181948/2253888） –

干杯的确认。非常感激。 – danMad

@mixin伪元素可能

回答

相关问题