嵌套选择器中的“&”号(父选择器)\[重复\]

css CSS

樱小胖Mandy

2020-03-24

这是没有记录或只是不可能?

#parent {
  #child {
    width: 75%;

    .additional_parent_class & {
      width: 50%;
    }
  }
}

这基本上将变成:

.additional_parent_class #parent #child {
  width: 50%;
}

尽管这是因为“&”符号的实现及其使用方式才有意义的。如果我想让它实现这一目标怎么办:

#parent.additional_parent_class #child {
  width: 50%;
}

我能够做到这一点的唯一方法是通过在子声明之外编写另一条规则:

#parent{
  #child {
    width: 75%;
  }

  &.additional_parent_class #child {
    width: 50%;
  }
}

尽管在此实现中这不一定是“痛苦中的痛苦”,但如果#child有自己的孩子,这似乎适得其反,则现在需要在两个规则中都重复这些孩子。

无论如何,也许我只是很挑剔,但是如果有更多的方式遍历选择器,那就太好了。

第3272篇《嵌套选择器中的“&”号(父选择器)\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
小胖 2020.03.24

我同意这将非常有帮助。不幸的是,当前在SASS(或我所知道的任何其他CSS预处理器)中是不可能的。

伽罗 2020.03.24

尽管目前尚无法实现,&但预计语法以及许多类似的改进将在Sass 3.3中发布。您可以在此处关注有关Sass问题的功能的讨论

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android