在嵌套选择器中使用&符号（SASS父选择器） [英] Using the ampersand (SASS parent selector) inside nested selectors

问题描述

好吧，所以这困扰了我，因为我一直在使用Sass / Scss的大约一年左右。我理解父选择器的一般意义。

这是我奋斗的地方（无论是没有记录还是只是不可能）：

  #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％; 
} 
} 
  

虽然这不一定是 butt'在这个实现，似乎反效果如果#child有自己的孩子，现在需要在两个规则中复制。

无论如何，也许我只是挑剔，但如果有更多的方法遍历选择器，这将是巨大的。

任何人都知道我不知道吗？

谢谢！

& 语法的这种改进和许多类似的改进都是为了释放萨斯3.3。您可以在此处的Sass问题上关注此功能的讨论。

Okay so this has bothered me since I've been using Sass/Scss for the last year or so. I understand the parent selector in its general sense.

This is where I struggle (whether it's not documented or just not possible):

#parent {
  #child {
    width: 75%;

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

This will basically turn into:

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

While this makes sense because of the implementation of the ampersand and how it's used. What if I'm trying to get it to achieve this:

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

The only way I have been able to achieve this is by writing another rule outside of the child declarations:

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

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

While this isn't necessarily a 'pain in the butt' in this implementation, it seems counter productive if #child has children of its own that will now need to be duplicated in both rules.

Anyway, maybe I'm just being picky, but it would be great if there were more ways to traverse through the selectors.

Anyone know something I don't?

Thanks!

解决方案

Although it is not currently possible, this and many similar improvements to the & syntax are slated for release in Sass 3.3. You can follow the discussion about the feature on the Sass issue here.

这篇关于在嵌套选择器中使用&符号（SASS父选择器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！