@mixin for pseudo element

Question

私が取り組んでいるプロジェクトで、擬似要素の古い宣言と新しい宣言をサポートする必要があります。私はSCSS @mixinを作成して、自分自身を繰り返さなくても済むようにしたいと思っています。

私は次のことを達成したいと思っています：

宣言：

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

がコンパイル：

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

をだから私は基本的に両方のために従ってください@mixin@extendに任意のCSSプロパティを必要とします:beforeおよび::before。

私はこれを解決することなく、高低を検索しました。彼らの魔術師の魔法使いは私の夢を現実にすることができますか？

はここで事前

Answer 1

にありがとう、あなたは芽を行く：

@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