Why isn't Shopify compiling my SASS parent selector?

Question

I'm trying to style a label that has a checkbox inside of it. I want the label to change color when the checkbox is selected.

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

Using SASS and the ampersand, this should be possible with:

input {
    background-color: red;

    &:checked {

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

I ran a test and this worked, however, this doesn't work in Shopify. In fact, Shopify doesn't seem to compile it at all. Am I missing something?

score 2 · Answer 1 · answered Oct 24 '17 at 21:22

2

Selecting a parent is currently not supported in any major browser (no matter what CSS preprocessor you are using).

However if your label is on the same level as your checkbox, then you can use the sibling selector like so:

input:checked + label {
  background: red;
}

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

In terms of SCSS it should look something like (I haven't tested it though):

input {
    background-color: red;

    &:checked {

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

answered Oct 24 '17 at 21:22

lumio

I understand you can’t select a parent using vanilla CSS, but this IS possible with SASS, though it doesn’t seem to be documented. I’ve tested it and it works using the grunt-contrib-sass task. It just didn’t seem to work in Shopify. I’m wondering if I can update the Shopify compiler or something. – Michael Lynch Oct 24 '17 at 21:46
@MichaelLynch can you verify that? (e.g. creating a codepen?) I'm eager to see this work too! :) – lumio Oct 24 '17 at 21:48
Also: Maybe it would work, compiling your SCSS to plain CSS and use that in your Shopify application? – lumio Oct 24 '17 at 21:50

1 Answers1