我正在使用Sass作为样式。当我尝试编译这部分代码时：
.heart {
width: $size * 2;
height: $size * 1.65;
cursor: pointer;
&:before {
position: absolute;
content: "";
left: $size;
width: $size;
height: $size * 1.65;
background: #fff;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
&:after {
@extend .heart:before;
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
}
我收到此消息：
@extend .heart:before;
Error: compound selectors may longer be extended.
Consider `@extend .heart, :before` instead.
See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extending_compound_selectors for details.
@extend .heart:before;
它不能在终端上编译，但是可以编译，并且可以在Prepros应用程序中正常工作。有什么想法为什么当我尝试使用sass命令编译时它不起作用？
我使用了以下示例：https : //codepen.io/souporserious/pen/yEntv
我认为您需要创建一个这样的占位符；我也知道在2016年左右使用@extand和伪元素进行命令行编译时会出现一些错误。
%placeholder {
position: absolute;
content: "";
left: $size;
width: $size;
height: $size * 1.65;
background: #fff;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart {
width: $size * 2;
height: $size * 1.65;
cursor: pointer;
&:before {
@extend %placeholder;
}
&:after {
@extend %placeholder;
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句