7

我试图弄清楚是否有一种方法可以使用 LESS 或 SCSS 而无需保存文档或刷新浏览器。目前我使用的 CSS Edit 非常适合实时预览，但我无法找到一种方法让实时预览与 LESS 或 SCSS 一起使用。我的理想情况是与 Textmate 和我的浏览器一起使用真实的（或接近的）设置。我查看了一些选项，WebPutty 很棒，但它是 Beta 版和基于 Web 的，所以我希望有一个适合我现有工作流程的解决方案。

非常感谢

4

8 回答 8

1

这可能是您正在寻找的：livereload.com

我只是在谷歌搜索同样的问题时自己发现了这个，哈！

它目前仅适用于 64 位 Mac。它也处于测试阶段.. 开发下的 Windows 版本。

似乎找不到网站上提到的 v1 的链接？

于 2011-12-13T22:56:39.003 回答
1

您正在寻找的内容没有完整的解决方案。Chrome 开发工具（启用了 sass 源映射）是你最好的选择，但我认为你不能做 mixins

http://livestyle.emmet.io/是您可能想尝试的另一个选项

括号适用于实时更改，但仅适用于 chrome

这就是我所做的，它达到了目的，并且在 mac/pc 和 linux 中像一个魅力一样工作 打开一个终端，执行 sass --watch 有另一个终端/应用程序，让你运行 live-reload

您的 sass 将编译，并且一旦您的样式表更改，您的所有浏览器都会刷新但是您不能对此进行样式注入，这意味着页面将刷新（如果您想要主题对话框，您将不得不再次打开它们）但是那里还有其他可用于样式注入的工具

希望这可以帮助！

于 2013-10-08T21:28:52.273 回答
1

查看边缘。http://getedge.io - 它让您可以从 Sublime Text 或 Textmate 实时编辑 Sass 和 LESS 文件。无需保存文件 - 它会在您键入时更新。您现在可以注册私人测试版。

于 2012-11-06T14:53:13.587 回答
1

如果您使用的是静态文件，则可以使用来自http://f.cl.ly/items/0y2G351r3O3T3j1b401u/Live-LESS-previewing-in-Espresso.html的代码

<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style.less" type="text/css" media="screen" />

<!-- Then link to LESS, and enable development watch mode -->
<script src="less-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
    less.env = "development";
    less.watch();
</script>
<!-- Voilà! Instant LESS previews in Espresso -->

但是，如果您使用的是 localhost，我还没有弄清楚如何让它工作。

于 2012-02-17T00:03:45.710 回答
0

在 rails 本地服务器上尝试了书签版本。工作轻而易举！ CSS刷新

于 2012-08-01T04:04:34.047 回答
0

live.js 是您的解决方案 :)

它不仅适用于 html、js、css，而且适用于更少。您必须使用 css 文件类型来欺骗它：

<link rel="stylesheet/less" type="text/css" href="stylesheets/main.less.css">
于 2012-01-10T16:39:30.323 回答
0

前几天我和我的同事打开了http://less2css.org。允许您选择版本并实时查看您的较少转换。

希望它可以帮助某人。

于 2013-01-09T01:26:29.170 回答
0

我认为现在没有这样的插件，但我也是Live CSS Editor的粉丝（如果这就是 CSS Edit 的意思）。

我认为拥有与 SASS 或 LESS 支持类似的东西会很有用，所以我为这种 Chrome 插件制作了一个快速原型（类似于 Live CSS Editor）。它包括语法高亮和使用客户端 LESS 库的 LESS 支持。它不是用户友好的，因此不是 Chrome 商店的候选者，但这里是谷歌代码项目，它可以作为解压扩展程序下载并加载到 Chrome 中。随着时间的推移，我会尝试改进它，但其他人也可以尝试；）

屏幕截图和更多内容在此博客文章中。

于 2013-10-08T20:54:24.357 回答