如何less.js工作

目前,我刚刚使用我的网站less.js解决方法。 它工作正常。 假设代码如下所示。

<html> <head> <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script> </head> <body> ... </body> </html> 

当我更新styles.less文件时,只需刷新页面。 Less.js将编译较less的文件并应用于页面。 但我只是想知道在哪里存储的css文件? 我也想知道less.js调用lessc编译less文件?

谢谢。

在你给的设置(HTML页面)中,你让客户担心解释Less文件。

确切地说,浏览器加载你链接到的JavaScript库,然后这个JavaScript解释styles.less文件。

实际的css文件不存储在服务器上,因为它是所有浏览器的工作,我怀疑浏览器将它存储在除RAM外的其他地方。


这听起来不是一个好方法。 我们这些拥有高端服务器的网站所有者都喜欢尽可能的将客户端的计算能力提升出来。 我们不想让iPhone用户在没有必要的情况下电池电量不足。

或者,在完成编辑后,在样式文件上运行lessc styles.less > styles.css 。 然后直接在HTML中使用styles.css ,也从HTML中移除less.js


您可能想问的问题: 如何编译为自动css呢?

有几个解决scheme:

  • 使用一些软件来查看文件或目录,自动编辑更less的文件
  • 您正在使用的编辑器可能具有编译较less的function,或者作为扩展添加。
  • 你可能想要考虑使用Web框架。 如果你从web框架中获得其他优势,或者已经在使用它,这是一个不错的select。 Express框架使用Less中间件的一个例子 。

我知道这样的:JavaScript从'链接'标签读取较less的文件,然后parsing到'样式'标签的HTML页面,你应该使用浏览器debugging工具看到它(dynamic时closures页面,然后样式标签将被清除)。