如何在 SCSS 中定位 firefox 或任何其他浏览器？答案

【问题标题】：How to target firefox or any other browser in SCSS?如何在 SCSS 中定位 firefox 或任何其他浏览器？
【发布时间】：2016-10-12 00:53:55
【问题描述】：

字形图标未对齐并且在 Firefox 中的行为不正常，而在 Chrome 和 Safari 中看起来很完美。为了解决这个问题，我正在尝试编写一个仅适用于 Mozilla 浏览器的规则。

有什么方法可以通过使用@if 之类的指令来检测SCSS 中的浏览器。类似于以下内容：

@if $browser === mozilla {
    //apply this CSS
   .pull-right.glyphicon.glyphicon-chevron-right {
    top: -13px;
    line-height: 0.5 !important;
}

我们有什么简单的检测方法吗？我尝试使用在 SCSS 中不起作用的 @moz-document url-prefix()。

here 提出了类似的问题，但没有正确的解决方案。

非常感谢任何帮助或指导。谢谢。

【问题讨论】：

试试JS console.log(navigator.userAgent);
我试图只用 Sass 来做。我不想在这里合并 JavaScript。使用 JS，它非常简单，我正在尝试找到一种方法或找出是否可以使用 Sass。 :)
Targeting only Firefox with CSS的可能重复
和stackoverflow.com/questions/9328832/…
首先找到您需要的浏览器的定位方式（如@moz-document），然后创建一个mixin，因此您可以将其称为@include browser(firefox) { ruleset }

【解决方案1】：

当前缀规则用于混合时，设法让 scss 编译，但不是：

@mixin firefox-only {
  @at-root {
    @-moz-document url-prefix() {
      & {
        @content;
      }
    }
  }
}

然后

@include firefox-only {
  prop: val;
}

【讨论】：

【解决方案2】：

我使用以下方法解决了我在 Firefox 上将文本缩进应用于双倍宽度的问题。

select {
 text-indent: calc(50% - 16px);

 @supports (-moz-appearance:none) {
  text-indent: calc(25% - 8px);
 }
}

【讨论】：