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

发布于 2024-12-19 15:08:06 字数 227 浏览 0 评论 0原文

我试图弄清楚是否有一种方法可以使用 LESS 或 SCSS，而无需保存文档或刷新浏览器。目前我使用 CSS Edit，它非常适合实时预览，但我找不到一种方法让实时预览与 LESS 或 SCSS 一起使用。我的理想情况是与 Textmate 和我的浏览器一起获得真正实时（或接近）的设置。我研究了几个选项，WebPutty 很棒，但它还处于测试阶段并且基于 Web，因此我希望有一个能够适合我现有工作流程的解决方案。

非常感谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小ぇ时光︴ 2024-12-26 15:08:06

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

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

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

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

回复收藏 0 原文

倾｀听者〃 2024-12-26 15:08:06

如果您使用静态文件，则可以使用取自 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 -->

但是，如果您使用的是本地主机，我还不知道如何让它发挥作用。

If you're using static files you can use this code taken from 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 -->

However, if you are using localhost, I've not figured out how to get this to work yet.

回复收藏 0 原文

知你几分 2024-12-26 15:08:06

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

回复收藏 0 原文

黑凤梨 2024-12-26 15:08:06

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

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

Brackets 可以很好地处理实时更改，但仅适用于 chrome

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

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

希望这会有所帮助！

回复收藏 0 原文

橘虞初梦 2024-12-26 15:08:06

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

它不仅适用于 html、js、css，而且还适用于 less。
你必须用 css 文件类型来欺骗它：

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

live.js is your solution :)

It doesn't not only work with html, js, css but also less.
You have to trick it with filetype of css:

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

回复收藏 0 原文

陌伤ぢ 2024-12-26 15:08:06

尝试了 Rails 本地服务器上的书签版本。工作起来轻而易举！
CSSRefresh

回复收藏 0 原文

酸甜透明夹心 2024-12-26 15:08:06

前几天，我和我的同事创建了 http://less2css.org。允许您选择版本并实时查看您的转换量。

希望它能帮助某人。

回复收藏 0 原文

赴月观长安 2024-12-26 15:08:06

我认为目前还没有这样的附加组件，但我也是 Live CSS Editor（如果这就是您所说的 CSS 编辑的意思）。

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

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