为什么 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;
        }
    }
}