为 Firefox 使用 lesscss 和浏览器 hack答案

【问题标题】：Using lesscss and browser hacks for Firefox为 Firefox 使用 lesscss 和浏览器 hack
【发布时间】：2012-07-17 21:30:14
【问题描述】：

我正在手动将一个 css 文件转换为 less，并且我正在尝试找到一种方法来执行特定于浏览器的 css。我尝试使用网站上提到的 ~"" 来逃避它，但它似乎不适用于整个代码块。

对于 IE，这些工作：

padding: ~"5px\9"; /* IE8 and below */ 
*padding:4px;  /* IE7 and below */ 
_padding:2px;  /* IE6 */

对于 Chrome，这是可行的：

/* This will apply the styling only to Chrome and Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #mySelector {
    color: red;
  }
}

但是，Firefox 呢？我如何逃避类似的事情：

/* This will apply the styling only to Firefox */
@-moz-document url-prefix() {
  #mySelector {
    color: red;
  }
}

【问题讨论】：

后者工作正常，没有任何错误（使用lessc v1.3.0测试）。
我在 Visual Studio 中使用 dotLess VS 扩展，它可能有不同的版本。我可以检查一下。
这似乎按预期工作，如果我想知道插件的输出，我倾向于尝试winless.org/online-less-compiler中的较少代码
感谢@JohnC。猜猜这是我的编译器。我找到了一个 hack，我的 hack 现在可以绕过它。
填充：~"5px\9";在 IE9 中工作

标签： google-chrome firefox escaping less

【解决方案1】：

根据 cmets 和其他黑客的可用性，我创建了一个解决方法。

如前所述，它确实使用 WinLess.org 编译器 (http://winless.org/online-less-compiler) 进行编译。

它不使用 DotLess 进行编译，所以我刚刚反转了 hack。而不是：

#mySelector {
    color: red;
}
/* This will apply the styling only to Firefox */
@-moz-document url-prefix() {
  #mySelector {
    color: green;
  }
}

我已经完成了：

/* FF needs green*/
#mySelector {
   color: green;
    /*IEs need red*/
    color: ~"red\9";
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #mySelector {
    /*Chrome needs red*/
       color: red;
    }
}

【讨论】：