在IE中使用LESS会抛出异常

Question

我正在尝试使用LESS和respond.js来简化新网站的开发。两者都非常棒。但是，在IE浏览器中，我遇到了很多LESS相关的问题。

首先，在IE8模式下，我的IE10浏览器报错说不理解“map”这个东西。没问题，我写了一个Array.prototype map扩展程序。然后，它又提示在IE8模式下不理解isArray。再次，用原型扩展方法救场。现在，它返回的错误信息是“SyntaxError：Invalid operand to 'in': Object expected”。

事实上，我并不知道“in”具体是什么，但无论如何，我不能像以前一样做一些临时的prototype扩展程序，希望最终能够解决所有问题。要么LESS不能在IE浏览器中使用，要么这里有人可以指出所有需要解决的问题。

- DroidOS

---

只是为了确保...你是将less文件嵌入到你的html中还是编译后的css文件？ - RobDil

LESS网站上实际上有一个限制，它只在“现代浏览器”上客户端工作。他们没有明确说明如何定义“现代”，但我猜想这意味着IE9+。无论如何，我放弃了现成的CSS预处理器，转而使用一个轻量级自制的PHP脚本，效果同样出色。不过你猜对了——我的问题是因为我将LESS嵌入HTML中，这让IE9-感到困扰。 - DroidOS

Answer 1

你的问题的答案：

首先，LESS客户端编译仅支持IE9+。您可以使用ES5的shims和polyfills（例如这些）来解决此问题。

但是，请不要这样做。

您应该做的事情（忘记第一部分）：

然而，尽管LESS编译器提供了真正好的缓存机制（例如使用localStorage来保留生成的代码），但在生产中使用它并不被认为是一个好的实践。

GruntJS和Bower.io在控制台中工作，但相对容易配置。基本上，您只需设置一次，然后将它们忘记即可：）

Livereload为您提供了一个GUI，非常容易使用。

我在前端开发中使用GruntJS，与使用PHP（CakePHP，Zend，Laravel）的后端开发人员一起工作，这使我们的生活变得更加轻松：）

使用类似GruntJS或Brunch.io的任务运行器或安装Livereload来简化前端开发流程更为合理。这些工具将监视文件更改并在每次保存时生成新的CSS文件（同时，也会动态重新加载您的CSS）。

您可以使用watch和LESS插件安装GrunJS，并保持非常简单。您甚至可以全局安装LESS Node.js软件包来完成此任务。

- Rafal Pastuszak

---

感谢您的回答。正如我在对@ToniTornado的评论中提到的那样，我最终放弃了LESS，转而使用一个PHP脚本来动态生成我的样式表。然而，总是很不错能够得到其他工具、API等的指引——这些终将早晚会派上用场。 - DroidOS

好的，当然，很高兴能够帮上一点忙。我只是认为这可能是解决这个特定问题的更好方法。我花了很多时间尝试找到最有效和无痛的方法来进行前端开发，并将我的项目与后端（主要是php）开发人员分离，我提到的方法似乎可以解决这个问题。只是说一下 :)顺便说一句，我会尽量避免使用PHP与LESS或任何基于JavaScript的技术（即使是端口）。根据我的经验，我可以说，通常，Node包具有更好的支持和测试覆盖率。 - Rafal Pastuszak