Why are properties not applied in SCSS?

Question

Sass

There is an element and a pseudo-class. If the element has an active class, then the pseudo-element needs to be slightly rotated. But for some reason the rules don't apply. Where do I spit?

&-head {
    position: relative;
    padding: 28px 0;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 10px;
        width: 30px;
        height: 30px;
        background: url(/build/image/x.svg) 0 0 no-repeat;
        background-size: cover;
    }

    &.active &::before {
        transform: translateY(-50%) rotate(45deg);
        background-color: red;
    }
}

If I try &.active span {свойства}, then the rules take effect on the span, but not on the pseudo-element. It also does not affect the element itself, if you do &.active & {свойства}.

Answer 1

I am surprised by such questions. Are you too lazy to look at the compiled css to find your mistake?