Настройка переключателя в синтаксисе SCSS

Question

Я настроил свои радио-кнопки, но я хотел сделать мой код чище, используя SCSS. Поэтому я изменил свой код с CSS на SCSS, но появилась проблема:

HTML

<input type="radio" name="test" value="value">
<label>
    <span></span>
    Test radio
</label>

CSS

input[type="radio"] {
    display: none;
}

input[type="radio"] + label span {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    vertical-align: middle;
    background: url(./radio-sprite.svg) -46px 0 no-repeat;
    background-size: 92px 24px;
    cursor: pointer;
}

input[type="radio"]:checked + label span {
    background: url(./radio-sprite.svg) -69px 0px no-repeat;
    background-size: 92px 24px;
}

input[type="radio"]:disabled + label span {
    background: url(./radio-sprite.svg) -22px 0px no-repeat;
    background-size: 92px 24px;
}

SCSS

input[type="radio"] {
    display: none;

    & > label {
        cursor: pointer;

        span {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-right: $margin-small;
            vertical-align: middle;
            background: url(./app/shared/assets/icons/radiobtn-sprite.svg) -46px 0 no-repeat;
            background-size: 92px 24px;
            cursor: pointer;
        }
    }

    &:checked + label span {
        background: url(./app/shared/assets/icons/radiobtn-sprite.svg) -69px 0px no-repeat;
        background-size: 92px 24px;
    }

    &:disabled + label span  {
        background: url(./app/shared/assets/icons/radiobtn-sprite.svg) -22px 0px no-repeat;
        background-size: 92px 24px;
    }
}

Когда я заменил свой CSS на вышеуказанный код SCSS, мои кнопки исчезли. Я не вижу, в чем проблема. Любая помощь будет оценена

Answer 1

Во-первых, ваш код CSS неверен, потому что вы не можете использовать переменную в CSS как $margin-small

Во-вторых, я использую конвертер , чтобы сделать это

$margin-small:15px;

input[type="radio"] {
  display: none;
  + label span {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: $margin-small;
    vertical-align: middle;
    background: url(./radio-sprite.svg) -46px 0 no-repeat;
    background-size: 92px 24px;
    cursor: pointer;
  }
  &:checked + label span {
    background: url(./radio-sprite.svg) -69px 0px no-repeat;
    background-size: 92px 24px;
  }
  &:disabled + label span {
    background: url(./radio-sprite.svg) -22px 0px no-repeat;
    background-size: 92px 24px;
  }
}

Answer 2

Вы должны использовать селектор +:

& + label {
        cursor: pointer;
        span {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-right: $margin-small;
            vertical-align: middle;
            background: url(./app/shared/assets/icons/radiobtn-sprite.svg) -46px 0 no-repeat;
            background-size: 92px 24px;
            cursor: pointer;
        }
    }