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

Question

我有一个包含以下内容的 SCSS 文件

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

按预期工作。我还希望 textarea 具有相同的 CSS。SCSS 是否有一个选择器，可以让我将 textarea 与

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

在 SCSS 文件中，但不要将“输入”父级放在 textarea 之前。我试图实现的输出如下

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
}