I'm using Sass for styles. When i try to compile this part of code:
.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%;
}
}
I got this message:
@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;
It doesn't compile with terminal, but it's compile and works as expected with Prepros application. Any ideas why it doesn't work when i try to compile with sass
command?
I used this example: https://codepen.io/souporserious/pen/yEntv
I think you need to create a placeholder like this; Also I know that there are some bugs in command line compiling with @extand and pseudo-elements around 2016.
%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%;
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments