CODEWITHSUNDEEP
sass
ygoe
ygoe

Reputation: 20384

How to fix Sass Error: Invalid parent selector "[type=button]"

I switched my Sass compiler from libsass/sassc 3.6.2 to Dart Sass 1.44.0 and now I get this error. I have no idea what that means. Is it a bug?

Error: Invalid parent selector "[type=button]"
    ╷
312 │ ┌     &a:link,
313 │ │     &a:visited
314 │ │     {
    │ └────^
    ╵

This is the code:

#{$buttonInputs},
div.buttons a,
span.buttons a,
a.button
{
    // (some lines omitted...)
    &a:link,
    &a:visited
    {
        color: $buttonColor;
        text-decoration: none !important;
    }
}

And this definition in an imported file:

$buttonInputs: "button, input[type=button], input[type=color], input[type=image], input[type=reset], input[type=submit]";

Why is there a difference between both Sass compilers? And how do I get rid of the error to continue my work?

Upvotes: 0

Views: 638

Answers (1)

jcairney
jcairney

Reputation: 3224

@AmauryHanser had a good point in the comments on the initial question.

For every type listed in the enclosing selector, and every use of the & in the nested selector, the compiler is going to combine them (exactly as written, no added spaces). Notice how things like button from the enclosing selector list and a from the nested selector become mashed together into a single element buttona because there was no space between & and a:link in the nested selector:

//compiler output

buttona:link, buttona:visited {
    color: grey;
    text-decoration: none !important;
}

input[type=button]a:link, input[type=button]a:visited {...omitted for brevity...} 

input[type=color]a:link, input[type=color]a:visited {...}

input[type=image]a:link, input[type=image]a:visited {...}

input[type=reset]a:link, input[type=reset]a:visited {...} 

input[type=submit]a:link, input[type=submit]a:visited {...}

div.buttons aa:link,div.buttons aa:visited {...}

span.buttons aa:link,span.buttons aa:visited {...}

a.buttona:link, a.buttona:visited {...}

It's possible your previous compiler was processing the & operator more intelligently, or just didn't care to report errors on the non-sensical rules that were being produced.

I would recommend: a) Removing a from your nested selector rules so the :linked and :visited pseudo-classes apply directly on whatever is coming from the enclosing selector

#{$buttonInputs},
div.buttons a,
span.buttons a,
a.button
{
    
    &:link, // a removed
    &:visited
    {
        color: $buttonColor;
        text-decoration: none !important;
    }
}

or b) Putting a space between & and a so a:visited and a:link are treated as DOM descendants of whatever the enclosing selector is.

#{$buttonInputs},
div.buttons a,
span.buttons a,
a.button
{
    & a:link, // space added
    & a:visited
    {
        color: $buttonColor;
        text-decoration: none !important;
    }
}

but I would also say that the list of elements coming from the enclosing selector rule is not suitable for the nested selector rule, since a doesn't make sense as a child of input nor does :visited make sense as a pseudo-class of input.

Upvotes: 1

Related Questions