Sass 回嵌套问题

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 和字符串插值 #{}。

基本上它的工作方式如下；

1. 使用@at-root 跳出班级，跳到“根”。
2. 我们在那之后安排我们的课程，我使用了.--modifer-is-red。
3. 我们通过使用&、#{&} 的插值来附加我们跳出的类。

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

有没有办法在不向父级添加修饰符并再次路径到伪的情况下做到这一点？

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