@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僞元素可能

回答

相關問題