客户端使用Stylus(CSS)

时间:2012-07-05 22:16:36

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

这里的新人。我一直在寻找使用Stylus(编译的CSS)客户端的好方法。

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

  1. 如果没有使用JS,它会中断。
  2. 在实时客户端环境中编译需要额外的时间。
  3. 需要在每个客户端重新编译,而不是绿色。
  4. 但是,我的环境是Chrome和Opera的扩展。它在JS环境中工作,并且脱机工作,因此1,2或3都不适用。我真正想要的只是一种更有效地编写CSS的方法,减少头痛,更多变量,嵌套和混合。

    我尝试了Less,这是三人组Less,Sass和Stylus中唯一一个目前在客户端工作得很好的人。那么,有没有人知道Stylus的一个很好的解决方案?

4 个答案:

答案 0 :(得分:4)

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

Stylus / Sass默认不提供此功能这一事实实际上是一件好事,我个人希望LESS没有;然而,与此同时,我确实意识到让它为那些可能更愿意拥有一些可以在一开始帮助他们的训练轮的人打开了大门。每个人都以不同的方式学习,所以这可能只是最初可以让某些人进入门的特征。因此,对于开发来说,它可能没问题,但在撰写本文时,这个工作流程并不是生产中最高效的工作流程。希望在某些时候,这些工具中的大多数有用功能都将添加到原生CSS中,这将是一个没有实际意义的点。

现在,我的建议是仅部署已编译的CSS并在开发中使用诸如watch或guard或live-reload或codekit(或任何suitable equivalent file watcher)之类的内容,以便将您的手写笔文件重新编译为你编码。

答案 1 :(得分:4)

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

似乎正在动态编写Stylus。

答案 2 :(得分:2)

答案 3 :(得分:0)

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

之前的实现需要javascript在浏览器中将LESS文件编译成CSS,我从来没有尝试过这种方式对我来说似乎不太好,正如你所说的那样,如果JS在关闭时间过了很长时间。

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

我使用的第一个应用程序是crunch http://crunchapp.net/,它工作得很好,但没有动态编译css。

我现在使用的应用程序称为simpless http://wearekiss.com/simpless,这会在运行中创建有效的css,所以只要我在崇高文本中点击保存并在浏览器中刷新我就可以看到我对的CSS。

使用这个工作流程,我能够解决你上面提出的问题,当我完成开发时,我只需要上传从simpless输出的css文件,这也是大大缩小了,这也节省了需要的时间进一步优化CSS。

我希望我能正确理解这个问题,如果不是道歉。

干杯, 斯特凡