我需要在我正在开发的项目上支持伪元素的新旧声明。我想创建一个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巫师能够让我的梦想成真吗?
提前谢谢
答案 0 :(得分:3)
在这里你萌芽:
@mixin pseudo-element($element) {
&:#{$element}, &::#{$element} {
@content;
}
}
// Usage:
.foo {
@include pseudo-element('before') {
content: '';
}
}
输出:
.foo:before, .foo::before {
content: '';
}
答案 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;
}