.dark .hover .red svg:hover { fill: #8B0000; }
instead of
dark .hover svg:hover.red { fill: #8B0000; }
Current result is that after compile, in CSS svg is inside the class RED, while it should be at the same level.
I solved the issue putting a class .svg to the svg element, and in that case it worked.
This SASS instruction
.dark { .red { & svg { &:hover { fill: $red-dark }}}}is compiled
.dark .hover .red svg:hover { fill: #8B0000; }instead ofdark .hover svg:hover.red { fill: #8B0000; }Current result is that after compile, in CSS svg is inside the class RED, while it should be at the same level.I solved the issue putting a class .svg to the svg element, and in that case it worked.