Question

我试图弄清楚如何专门将嵌套返回到我所在的css嵌套的父级。意思是，我当前的设置是跨越前伪的父类。我需要根据父级的修饰符更改伪的样式。如果我这样做：

.parent {
    span {
       &:before {
          // styles

          .modifier & {
             // Other styles
          }
       }
   }
}

输出为.modifier .parent span:before我需要的是.parent.modifier span:before

在没有将修饰符添加到父级并再次路径到伪的情况下，是否有办法执行此操作？这是我想要避免的。

.parent {
    span {
       &:before {
          // styles
       }
   }
   &.modifier {
       span {
          &:before {
             // Other Styles
          }
       }    
   }
}

Answer 1

这当然是可能的，它确实需要使用一些鲜为人知的sass函数@at-root，& ampersand和字符串插值#{}。

基本上它以下列方式工作;

使用@at-root跳出课堂以外的＆＃39; root＆＃39;。
之后我们上课，我已经使用了.--modifer-is-red。
我们使用&，#{&}的插值附加我们跳出的类。

Live Example

用于清晰的示例

.parent {
  span {
     &:before {
      // styles
      color: black;

      // Modifiers attached to the parent
      @at-root .--modifier-is-red#{&} {
        color: red;
      }
    }
  }
}

// output
// .--modifier-is-red.parent span:before {
//   color: red;
// }

反映您的代码的确切示例

.parent {
    span {
       &:before {
          // styles
          @at-root .modifier#{&} {
             // Other styles
          }
       }
   }
}

这有一些局限性，修改器放在输出中的父级之前看起来有些奇怪，但浏览器并不介意。

我希望这能解决你的问题。

Answer 2

如果没有将修饰符添加到父级并再次路径到伪，是不是有办法做到这一点？

不，因为您只有&变量可以使用，它始终是由整个复杂选择器组成的单个单元。您不能指定希望修改器在复杂选择器中间的的确切位置。您可以做的最好的事情是将其作为复合选择器附加或与组合器一起使用。

Sass back nesting issue

2 个答案:

用于清晰的示例

反映您的代码的确切示例