SASS：如何声明内联依赖于浏览器的覆盖？

Question

目标是让最终的CSS看起来像：

.selector {
  font: 'Arial';
  font-weight: 400;
}

.ie7 .selector {
  font-weight: 500;
}

• &选择器引用父选择器，它不能引用全局类。
• 无法真正找到使用@extend。
的方法

• Mixins就是答案，但我不知道是否可以访问完整的选择器本身：

  .selector {
    font: 'Arial';
    font-weight: 400;
    @include ie7 {
      font-weight: 500;
    }     
  }
  

基本上，我正在寻找为当前选择器树声明前缀选择器的方法。提前谢谢。

Answer 1

你可以只是&来执行此操作：

.selector {
  font: 'Arial';
  font-weight: 400;
  .ie7 & {
    font-weight: 500;
  }
}

只需将.SCSS写为.ie7 &，Sass就会将其解释为容器：

.selector {
  font: 'Arial';
  font-weight: 400;
}
.ie7 .selector {
  font-weight: 500;
}

Answer 2

使用@at-root和&将解决此问题：

.foo {
   .bar {
     color: blue;
     @at-root .ie7 & {
       color: red;
     }
   }
 }

编译为：

.foo .bar {
  color: blue;
}
.ie7 .foo .bar {
  color: red;
}