是否可以使用SCSS选择父级的父级

Question

我有一个包含以下

的SCSS文件

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

按预期工作。我也希望textarea拥有相同的CSS。 SCSS是否有一个选择器，允许我使用

放置textarea

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

在SCSS文件中

但不在textarea之前放置'input'父级。我想要实现的输出如下

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

我知道我可以用mixin做到这一点但是我认为这个功能被添加到SCSS。

Answer 1

@extend在这些情况下非常棒。 ％是一种暗示这个类只会被扩展的方式。

%baseClass{
    margin: 0 0.5em;
}


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

textarea{
    @extend %baseClass;
}

Answer 2

不，你不能。对于冗长的选择器，您可以做的最好的事情是将其设置为变量并使用它。

$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
}