Почему не работает scss c input:invalid?

Question

[Максим js]

#form-registry input:invalid  .button {
    pointer-events: none;
}
#form-registry input:invalid + .button {
    pointer-events: none;
}
#form-registry input:invalid  {
    .button {
         pointer-events: none;
    }
}
#form-registry input:invalid  {
    &.button {
         pointer-events: none;
    }
}

ни одна из конструкций не отрабатывает. Но если сделать через

@if (#form-registry input:invalid) {
    .button {
        pointer-events: none; // в этом случаем кнопка отключается
    }
} @else {
    .button {
        pointer-events: all; // но это условие уже не работает
    }
}

не могу задисаблить кнопку вызова капчи до прохождения валидации инпутов(сабмит висит уже на кнопке самой модалки с капчей)
почему не работает scss? может из-за того что scss компилится в css? проект на laravel blade.php

Comments

[Сергей delphinpro]

почему не работает scss? может из-за того что scss компилится в css?

А по-другому возможно? Браузеры не понимают языки препроцессоров (sass/less/stylus). Все они компилятся в css и только потом скармливаются браузеру.

Answer 1

[Сергей delphinpro]

#form-registry input:invalid .button – это бессмысленный селектор. Input не может содержать внутри себя другие элементы.

#form-registry input:invalid  {
    .button {
         pointer-events: none;
    }
}

Это то же самое

#form-registry input:invalid  {
    &.button {
         pointer-events: none;
    }
}

Здесь вы либо не понимаете, что делаете, либо хз. Этот код сделает сам инпут прозрачным для указателя, если поле заполнено неправильно и имеет класс button

#form-registry input:invalid + .button

Вот здесь уже что-то осмысленное. Если кнопка расположена сразу после инпута, то она станет прозрачной для указателя, если поле заполнено неверно.

Конструкция с ифом тоже бредовая.