javascript - 是否可以在 HTML 中声明 LESS 变量？

Question

是否可以在 HTML 中声明 LESS 变量并在单独的 .less 文件中使用声明的变量。

我想做这样的事情：

<html>
<head>

<style type="text/less">
  @MYVAR: #9BC509;
</style>

<!-- use MYVAR inside the main.less file -->
<link rel="stylesheet/less" type="text/css" href="styles/less/main.less">

</head>
...
</html>

编辑：

由于这不起作用并且不是一个干净的解决方案，我重组了我的项目，现在做一个正常的 less 文件@incude为我需要的变量做一个正常的 less 文件。django 模板引擎将 less 文件与数据库值一起动态写入磁盘（并为获得更好的性能而进行了缓存）。

致所有反对者。我真的不明白你的意思！你甚至没有写下你投反对票的原因。我想你没有得到我的目标，这是我应该问“思想迟钝的人”的问题：

如何实现包含<head></head>在单独的更少文件中可用的更少变量？但无论如何，这只是为了让人们在某些时候点击这篇文章......正如我所说，我选择了另一种解决方案。

score 4 · Accepted Answer

您可以通过在globalVars全局less对象的属性中定义变量来做到这一点。您应该less在调用 less.js 编译器之前声明对象，另请参见：http ://lesscss.org/usage/#using-less-in-the-browser

<link rel="stylesheet/less" type="text/css" href="global.less">
<script>
    var less = {
    globalVars: {
      color: 'red',
      width: '15px'
    }
    }
</script>
<script src="js/less.min.js" type="text/javascript"></script>

上述使您可以在 global.less 的 Less 代码中使用@color和@width。

score 0 · Accepted Answer

您可以像这样在 less.js 脚本标签上定义它们：

<script src="/js/less.js" data-global-vars='{ "color1": "#333" }' rel="stylesheet/less"></script>

因此，对于 php，您可以执行以下操作：

<script src="/less.js" data-global-vars='<?php 
      echo json_encode([
                       'color1' => '#F0CF5B',
                ])
?>' rel="stylesheet/less"></script>

score -2 · Accepted Answer

你不能。你可以做的是给你的（或任何其他高级容器）一个类名，然后基于它定义多个值：

.home {
  @MYVAR: #9BC509;
}

.page {
  @MYVAR: #fff;
}

或者使用 LESS 守卫（参见LESS 文档）

javascript - 是否可以在 HTML 中声明 LESS 变量？

3 回答 3

Related

Reference