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

【问题标题】：Is it possible to select the parent of the parent with SCSS是否可以使用 SCSS 选择父级的父级
【发布时间】：2013-07-01 08:31:09
【问题描述】：

我有一个包含以下内容的 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。

【问题讨论】：

标签： sass

【解决方案1】：

@extend 在这些情况下非常有效。 % 很好地暗示了这个类只会被扩展。

%baseClass{
    margin: 0 0.5em;
}


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

textarea{
    @extend %baseClass;
}

【讨论】：

【解决方案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
}

【讨论】：