less.js的工作原理

时间:2014-07-07 09:57:40

标签: node.js less 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来编译较少的文件?

感谢。

2 个答案:

答案 0 :(得分:1)

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

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

实际的css文件没有存储在服务器上,因为它是所有浏览器支持的工作,我怀疑浏览器将它存储在除RAM之外的某个地方。


这听起来不是一个好方法。我们,拥有高端服务器的慷慨网站所有者喜欢尽可能地提升客户端的计算能力。我们不希望在没有必要的情况下打乱电池电量不足的iPhone用户。

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


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

有几种解决方案:

  • 使用某些软件观看文件或目录,自动编辑 less file 进行更改。
  • 您正在使用的编辑器可能具有编译较少的功能,或者作为扩展名添加。
  • 您可能想要使用Web框架来考虑策略。仅仅编译更少,这是一种过度杀伤,但如果你从Web框架获得其他建议或已经在使用它 - 这是一个不错的选择。 example使用具有Express框架的较少中间件。

答案 1 :(得分:0)

我知道这个:javascript从'link'标签读取较少的文件然后分析到'style'标签中的html页面,你应该使用浏览器调试工具看到它(当你关闭页面时它的动态,然后样式标签将被清除)。