在 SCSS 语法中自定义单选按钮答案

【问题标题】：Customizing radio-button in SCSS syntax在 SCSS 语法中自定义单选按钮
【发布时间】：2019-04-03 15:46:51
【问题描述】：

我自定义了我的单选按钮，但我想使用 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;
    }
}

当我用上面的 SCSS 代码替换我的 CSS 时，我的按钮消失了。我看不出似乎是什么问题。任何帮助将不胜感激

【问题讨论】：

你的意思是从 css 到 css？另请提供 HTML 代码。
@Chris_00 我的意思是从 CSS 到 SCSS。我编辑了问题
你的css代码无效你不能使用$margin-smallvarabile
检查背景图片路径是否正确，是否可以检索图片

标签： html css sass radio-button

【解决方案1】：

您必须使用+ 选择器：

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

【讨论】：

【解决方案2】：

首先你的css代码是无效的，因为你不能在css中使用变量$margin-small

其次，我使用convertor 来做到这一点

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

【讨论】：