使用 Sass/Less 和 Live Css 编辑答案

【问题标题】：using Sass/Less and Live Css editing使用 Sass/Less 和 Live Css 编辑
【发布时间】：2015-05-29 02:24:36
【问题描述】：

我一直想进入/开始使用 less/sass，但遇到了一个重大障碍。

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

在使用 codekit 等闲逛之后，就能够实时查看 css 更改并能够进行实验而言，这似乎是一个非常麻烦的过程。

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

【问题讨论】：

梦幻般的GruntJS 有一个监视任务
我通常只将 sass 用于大量默认 CSS，例如模板、按钮、表单、表格等。但是，当我确实需要转换 sass->css 时，我可以这样做使用koala-app.com 一键单击按钮。这是免费的。
感谢资源人员。会调查他们。这些功能与自动更新文件的 codekit 基本相同吗？
GruntJS 比 codekit 强大得多，但它需要更多的知识和时间。
明白了——所以本质上是一样的？

标签： css less

【解决方案1】：

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

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

客户端是最简单的入门方式，适合开发你的少。对于生产，尤其是在性能很重要的情况下，我们建议使用节点或众多第三方之一进行预编译工具。

您将有机会使用设置设置全局 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>

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

【讨论】：