符号嵌套选择器内部(父选择器)[重复](Ampersand (parent selector) in

2019-06-26 15:30发布

这个问题已经在这里有一个答案:

  • 修改的Sass选择的中间(添加/删除类等) 2个答案

这难道不是证明或只是不可能?

#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有自己的孩子,现在都需要在这两个规则被复制适得其反。

不管怎样,也许我只是被挑剔,但如果有更多的方式通过选择穿越这将是巨大的。

Answer 1:

虽然目前不可能,这和许多类似的改进&语法在萨斯3.3提名为发行。 您可以按照有关在萨斯问题的功能的讨论在这里 。



Answer 2:

我同意这将是非常有益的。 不幸的是,目前无法在SASS(或任何其他CSS预处理程序,我知道的)。



Answer 3:

这是能够在V3.4可能是3.3,但不能肯定。 我不是语法的粉丝虽然。 &要容易得多。 希望有类似^一个别名::)

#parent {
    #child {
        width: 75%;
        @at-root #{selector-replace(&, '#parent', '#parent.additional_parent_class')} {
            width: 50%;
        }  
    }
}


文章来源: Ampersand (parent selector) inside nested selectors [duplicate]