javascript - Stylus (CSS) 的客户端使用

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

新人来了。我一直在寻找一个很好的解决方案来使用 Stylus (编译的 CSS)客户端。

现在,我知道了关于不使用编译 CSS 客户端的提示,因为:

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

但是,我的环境是为 Chrome 和 Opera 制作的扩展程序。它在 JS 环境中工作并且它离线工作,所以 1、2 或 3 都不适用。我在这里真正寻找的只是一种更有效地编写 CSS 的方法,同时减少麻烦、增加变量、嵌套和混合。

我已经尝试过 Less,这是目前在客户端运行良好的 Less、Sass 和 Stylus 三重奏中唯一的一个。那么,有人知道 Stylus 的好的解决方案吗?

最佳答案

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

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

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

关于javascript - Stylus (CSS) 的客户端使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11353296/

相关文章:

javascript - 在 Ionic/Angular 项目中使用 ngCordova 时未定义 $cordovaBLE

javascript - 如何防止图像动画穿过我的整个屏幕而不仅仅是我的容器?

CSS - IE7 怪异 - 当我设置元素的不透明度时,我失去了兄弟元素的边距

google-chrome - 谷歌浏览器扩展热门网站图像

javascript - chrome.windows.create 帮助

javascript - CRX 文件未下载

javascript - Eternicode Bootstrap 日期选择器 : how do you pass options when you are using show event?

javascript - async.timesLimit() 将不接受有效的回调函数

css - 将文本顶部与列表项中的背景图像对齐

html - 我怎样才能包裹 table (CSS)