Question

在SASS的班级选择中，我想选择父母的兄弟姐妹。

.bw-textarea {
    height: 150px;
    padding: 10px;
    overflow-y: auto;
    background: white;
    text-align: left;
    width: 100%;
    border: 1px solid #eeeeee;
    font-size: 12px !important;
    color: #666666;

// textarea:disabled & {
//        background: #efefef;
//    }
}

编译上面的sass代码，

.bw-textarea textarea:disabled {
    background: #efefef;
}

但我想显示像这个css代码的结果......

如何在sass中选择这样的？

textarea.bw-textarea:disabled {
    background: #efefef;
}

Answer 1

在这种情况下你必须使用@root。这很简单

这个link会清楚地了解这个选择器

.bw-textarea {
  @at-root textarea#{&}:disabled{
    background: cyan;
  }
}

这将编译为

textarea.bw-textarea:disabled {
  background: cyan;
}

<强> See this PEN

Answer 2

这就是你要找的东西：

.bw-textarea {
    height: 150px;
    padding: 10px;
    overflow-y: auto;
    background: white;
    text-align: left;
    width: 100%;
    border: 1px solid #eeeeee;
    font-size: 12px !important;
    color: #666666;

    &:disabled {
         background: #efefef;
    }
}

查看这个SO答案，了解有关嵌套伪选择器的更多想法

Sass parent selector and hover?

当然要查看sass文档

https://sass-lang.com/documentation/file.SASS_REFERENCE.html

在SASS中，如何引用标签选择？

2 个答案: