Is it possible to select the parent of the parent with SCSS

1
votes

I have a SCSS file with the following

input{
  &[type="text"],
  &[type="search"]{   
    margin: 0 0.5em;
    }
  }

which works as expected. I would also like a textarea to have the same CSS. Does SCSS have a selector that will allow me to place textarea with the 

&[type="text"], &[type="search"]

in the SCSS file but not place the 'input' parent before textarea. The output I'm trying to achieve is as follows

input[type="text"], input[type="search"], textarea {
    margin: 0 0.5em;
}

I know I could do this with a mixin however I was thought this feature was added to SCSS.

2
sass

2 Answers

2
votes

@extend works really great in these situations. % is good as a way of implying that this class will only ever be extended.

%baseClass{
    margin: 0 0.5em;
}


input{
    &[type="text"],
    &[type="search"]{   
        @extend %baseClass;
    }
}

textarea{
    @extend %baseClass;
}
0
votes

No, you cannot. For a lengthy selector, The best you can do is set it as a variable and use that.

$form-input-text: unquote('input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]');

#{$form-input-text} {
    // styles;
}

#{$form-input-text}, textarea {
    // styles
}