为什么 Shopify 不编译我的 SASS 父选择器？

Question

我正在尝试为其中包含复选框的标签设置样式。当复选框被选中时，我希望标签改变颜色。

<label>
    <input type="checkbox">
</label>

使用 SASS 和 & 符号，这应该是可能的：

input {
    background-color: red;

    &:checked {

        label & {
            background-color: green;
        }
    }
}

我运行了一个测试，这很有效，但是，这在 Shopify 中不起作用。事实上， Shopify 似乎根本没有编译它。我错过了什么吗？

Answer 1

目前任何主流浏览器都不支持选择父级（无论您使用什么 CSS 预处理器）。

但是，如果您的标签与复选框处于同一级别，那么您可以像这样使用兄弟选择器：

input:checked + label {
  background: red;
}

<input id="aCheckbox" type="checkbox" />
<label for="aCheckbox">Test</label>

就 SCSS 而言，它应该看起来像（虽然我还没有测试过）：

input {
    background-color: red;

    &:checked {

        & + label {
            background-color: green;
        }
    }
}