Css Sass：将属性应用于具有相同类的父级_Css_Sass

Css Sass：将属性应用于具有相同类的父级

css sass

Css Sass：将属性应用于具有相同类的父级,css,sass,Css,Sass,我有以下标记： <body class="arabic specific-page"> <div class="child"> <div class="grand-child"> </div> </div> </body> 获取编译集以： .arabic .specific-page .child .grand-child 我想编译成： .arabic.specific-page .child .grand-child

我有以下标记：

<body class="arabic specific-page">
<div class="child">
<div class="grand-child">
</div>
</div>
</body>

获取编译集以：

.arabic .specific-page .child .grand-child

我想编译成：

.arabic.specific-page .child .grand-child (body has the same class)

在不更改树顶部的选择器的情况下，仅在子级

要使其工作，您需要稍微更改SASS。试一试

.specific-page {
  &.arabic {
    .child {
       .grand-child {

要想让它起作用，你需要稍微改变一下你的言辞。试一试

.specific-page {
  &.arabic {
    .child {
       .grand-child {

2种选择：

.arabic.specific-page {
  .child{
     .grand-child{

或者（您可以切换阿拉伯语和特定页面的顺序）：

2种选择：

.arabic.specific-page {
  .child{
     .grand-child{

或者（您可以切换阿拉伯语和特定页面的顺序）：

您可以在根目录下使用

，并打破嵌套结构

.specific-page {
  .child{
   .arabic {
     @at-root .arabic.specific-page .child .grand-child{}
   }
  }
 }

您可以在根目录下使用

，并打破嵌套结构

.specific-page {
  .child{
   .arabic {
     @at-root .arabic.specific-page .child .grand-child{}
   }
  }
 }

您可以使用@at root这样做：

.specific-page {
  .child{
      @at-root .arabic#{&} {
     .grand-child{
       border: 1px solid red;
     }
   }
}
}

编译为：

.arabic.specific-page.child.grand child

，请参阅

您可以使用@at root这样做：

.specific-page {
  .child{
      @at-root .arabic#{&} {
     .grand-child{
       border: 1px solid red;
     }
   }
}
}

编译为：

.arabic.specific-page.child.grand child

，请参阅

所以没有sass操作员，我可以在树下做吗？@ClaudiuCreanga，我不知道。

不用于遍历选择器树。您可以在root.specific-page.arabic.child.grand child中使用

。这将使用当前嵌套的已编译选择器中断您，并允许您编写新选择器，同时保持组件的嵌套外观。@ClaudiuCreanga使用根目录下的@检查我的答案，而无需再次传递完整的类上下文（也就是说，不需要专门写.specific page.child.grand child，只需要.阿拉伯语修饰符）：）所以没有sass操作符，我可以在树下面做吗？@ClaudiuCreanga，我不知道。&
不用于遍历选择器树。您可以在root.specific-page.arabic.child.grand child中使用。这将使用当前嵌套的已编译选择器中断您，并允许您编写新选择器，同时保持组件的嵌套外观。@ClaudiuCreanga使用根目录下的@检查我的答案，而无需再次传递完整的类上下文（也就是说，不需要专门写.specific page.child.grand child，只需写.阿拉伯语修饰符）：）