手写笔 (CSS) 的客户端使用答案

【问题标题】：Client side usage of Stylus (CSS)手写笔 (CSS) 的客户端使用
【发布时间】：2012-07-06 09:16:57
【问题描述】：

这里的新人。我一直在寻找使用Stylus（编译后的CSS）客户端的好解决方案。

现在，我知道了有关不使用已编译 CSS 客户端的提示，因为：

如果不使用 JS，它会中断。
在实时客户端环境中编译需要额外的时间。
它需要在每个客户端重新编译，这不是绿色的。

但是，我的环境是为 Chrome 和 Opera 制作的扩展。它在 JS 环境中工作，并且可以离线工作，因此 1、2 或 3 都不适用。我真正在这里寻找的只是一种更高效地编写 CSS 的方法，更少的麻烦、更多的变量、嵌套和混合。

我已经尝试过 Less，它是 Less、Sass 和 Stylus 三重奏中唯一一个目前在客户端工作得很好。那么，有没有人知道 Stylus 的好解决方案？

【问题讨论】：

标签： javascript css google-chrome-extension stylus opera-extension

【解决方案1】：

CSS 预处理器实际上并不意味着要在客户端运行。一些工具（即 LESS）提供了一个开发时客户端（JavaScript）编译器，可以即时编译；但是，这不适用于生产。

Stylus/Sass 默认不提供这一点实际上是一件好事，我个人希望 LESS 不提供；然而，与此同时，我确实意识到拥有它为那些可能更喜欢拥有一些可以在一开始就帮助他们的辅助轮的人打开了大门。每个人都以不同的方式学习，所以这可能只是最初可以让某些群体进入门的功能。因此，对于开发而言，它可能没问题，但在撰写本文时，此工作流并不是生产中性能最高的事情。希望在某个时候，这些工具中的大部分有用功能都将添加到原生 CSS 中，那么这将是一个有争议的问题。

现在，我的建议是仅部署已编译的 CSS，并在开发中使用诸如 watch 或 guard 或 live-reload 或 codekit（或任何suitable equivalent file watcher）之类的东西，这样您的手写笔文件就会在您编码时重新编译.

【讨论】：

我很高兴能在 dev 中编写 Stylus，然后将 CSS 部署到客户端浏览器。谢谢！我会试试看。
我也会推荐这个版本的手表 (github.com/visionmedia/watch#about)。我已经链接到 README 的 about 部分，其中列出了对原始版本的增强。
我知道这是一个老话题/线程，但我很好奇为什么你认为它不应该即时编译。多年来，我一直在使用像 Grunt 这样的预处理器构建流程，构建庞然大物的构建/部署流程，坦率地说，我对它们有点厌倦了。我希望现代浏览器已经支持这些替代语法......
@mmmeff 希望我的最新编辑回答您的问题。
在开发模式下在浏览器中即时编译 LESS / CSS 是一种完全有效的技术。热模块交换之类的事情更是如此。

【解决方案2】：

此页面可能有解决方案：http://learnboost.github.io/stylus/try.html

它似乎正在即时编译 Stylus。

【讨论】：

这个有。 stylus(str).render(function(err, cssStr){ ... });然后只需在样式元素中添加 CSS。
执行此操作的库是什么？
它们包括一个缩小版的手写笔：stylus-lang.com/try/stylus.min.js。如果您将该脚本放在任何页面上，您将可以访问stylus(src).render() 功能

【解决方案3】：

Stylus is capable of running in the browser

GitHub repo 中有一个 client 分支

【讨论】：

【解决方案4】：

我不完全理解你的问题，但我会提供一些使用 LESS 编译 css 的经验。

早期的实现需要 javascript 来在浏览器中将 LESS 文件编译成 CSS，我从未尝试过以这种方式工作，这对我来说似乎不是很好，正如你所说，如果 JS 关闭了一段时间.

我最近一直在使用应用程序将 LESS 代码编译成有效的 CSS，这绕过了 JS 转换源代码的需要。

我使用的第一个应用程序是 crunch http://crunchapp.net/，它运行良好，但没有即时编译 css。

我现在使用的应用程序称为 simpless http://wearekiss.com/simpless，它会即时创建有效的 css，因此只要我在 sublime 文本中保存并在浏览器中刷新，我就可以看到我对 css 的更改。

使用此工作流程，我能够解决您在上面提出的问题，当我完成开发后，我只需上传从 simpless 输出的 css 文件，该文件也被大大缩小，这也节省了时间进一步优化css。

如果没有道歉，我希望我已经正确理解了这个问题。

干杯，斯蒂芬

【讨论】：

扩展（有点）需要 JS，所以我确定它已打开。 Simpless 看起来很有趣，Sublime 也是如此。我会试试这个解决方法。