Question

我试图找出是否有办法使用LESS或SCSS而无需保存文档或刷新浏览器。目前我使用的CSS Edit非常适合实时预览但我无法找到一种方法来使用LESS或SCSS进行实时预览。我理想的情况是使用Textmate和我的broswer获得一个真实的（或接近）设置。我看了几个选项，WebPutty非常好，但它基于测试版和网络版，所以我喜欢一个适合我现有工作流程的解决方案。

非常感谢

Answer 1

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

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

目前仅适用于64位Mac。它也在beta .. 开发版下的Windows版本。

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

Answer 2

如果您使用的是静态文件，则可以使用此代码来自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，我还没弄明白如何让它工作。

Answer 3

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

Answer 4

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

http://livestyle.emmet.io/是您可能想要尝试的另一种选择

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

这就是我的工作，它的目的和工作方式类似于mac / pc和linux中的魅力打开一个打开sass的终端 - 手表有另一个终端/应用程序，让您运行实时重新加载

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

希望这有帮助！

Answer 5

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

它不仅适用于html，js，css，也适用于较少。你必须使用css：

的文件类型来欺骗它

<link rel="stylesheet/less" type="text/css" href="stylesheets/main.less.css">

Answer 6

在rails本地服务器上尝试了书签版本。轻而易举！ CssRefresh

Answer 7

我的同事和我前几天掀起了http://less2css.org。允许您选择版本并实时查看转换率较低的内容。

希望它有所帮助。

Answer 8

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

我认为与SASS或LESS支持类似的东西会很有用，所以我为这样的Chrome插件制作了一个快速原型（类似于Live CSS Editor）。它包括语法突出显示和使用client-side LESS library的LESS支持。它不是用户友好的，所以不是Chrome商店的候选者，但是这里是Google Code Project，可以将其下载并作为解包扩展程序加载到Chrome中。我会尝试随着时间的推移改进它，但其他任何人都可以尝试;）

屏幕截图以及更多内容in this blog post。

使用LESS或SCSS进行实时预览？

8 个答案: