Почему не применяются свойства в SCSS?

Question

[focusss]

Есть элемент и псевдокласс. Если у элемента навешивается класс active, то нужно чтоб псевдоэлемент слегка повернулся. Но, почему то не применяются правила. Где косячу?

&-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;
    }
}

Если же пробую &.active span {свойства}, то на span правила начинают действовать, а на псевдоэлемент нет. Так же не действует и на сам элемент, если сделать &.active & {свойства}.

Answer 1

[iBird Rose]

меня удивляют такие вопросы. вам лень посмотреть скомпиленный css, чтобы найти свою ошибку?

Comments

[focusss]

причина не в этом была.

[iBird Rose]

focusss, в любом случае ты бы эту проблему нашел просто посмотрев, что в итоге получилось в скомпиленном css

[Ankhena]

focusss, я бы рекомендовала отметить этот ответ решением. Потому что именно он является решением того, что описано и что могут прочитать другие пользователи у вас в вопросе.

[focusss]

iBird Rose, Верно, спасибо.

Answer 2

[focusss]

Проблему нашёл, класс навешивал не туда, на один уровень выше нужно было.