使用Sass / Less和Live Css编辑

Question

我一直意味着进入/开始使用less / sass但是我遇到了一个重大障碍。

我通常使用cssedit / espresso 3来编辑我的CSS，这基本上就像firefox的firebug。

在使用codekit等搞砸了之后，就能够看到css实时更改和能够进行实验而言，这似乎非常麻烦。

是否有类似的解决方案（对css编辑/ espresso实时预览）能够以较少/ sass方式编辑样式？

Answer 1

我只能回答你的问题。我个人认为grunt（工具）非常适合在协作项目中编译生产或语法​​检查的源代码。 “实时”测试和编辑LESS代码的最佳工具似乎是您的浏览器与首选的text / css编辑器结合使用。

另请参阅：http://lesscss.org/#usage“客户端使用”，您可以在这里找到所需的一切。他们也会给你相同的信息：

  

客户端是最简单的入门方式，也适合开发   你的LESS。对于生产，特别是如果性能很重要，   我们建议使用节点或许多第三方之一进行预编译   工具。

您将有机会使用设置设置全局JavaScript对象。在这种情况下，最重要的设置似乎env将其设置为development，这将阻止缓存LESS文件并直接在浏览器中显示编译错误：

开始在html文件的头部添加这样的内容：

<link rel="stylesheet/less" href="test.less">
<script type="text/javascript">less = { env: 'development',  poll: 5000 };</script>
<script src="less.js" type="text/javascript"></script>

如果您在浏览器http://localhost/less.html#!watch中的less.html调用中保存了上述内容，请立即编辑您的LESS文件（本例中为test.less）。保存LESS文件后，浏览器将“实时”显示您的结果（在5秒内）。 您可以在test.less中使用@import，并且还可以监视导入的文件。