css - 为什么less.js 不能计算颜色变量，但它是在将less 文件编译为css 时计算的？

Question

我在较少的文件中使用变量，如下所示：

@base-color: #8156A3;
@base-color-darker: (@base-color - #111);

#searchForm{
   border: 1px solid @base-color-darker;
}

当我将less文件编译为css文件时，变量可以正常工作，但是当我使用less文件作为页面样式表时，变量不会影响元素。

这就是我链接less.js和less样式表的方式：

<script src="assets/js/less.min.js"></script>
<link rel="stylesheet" href="assets/less/main.less" />

有什么问题？

score 3 · Accepted Answer

为了让 less.js 正确解析样式表，您需要在包含 less 文件时将rel属性设置为：stylesheet/less

<link rel="stylesheet/less" href="assets/less/main.less" />

您还需要在less.js之前包含您的样式表。

score 2 · Accepted Answer

将 .less 样式表与 rel 设置为“stylesheet/less”链接：
<link rel="stylesheet/less" type="text/css" href="styles.less" />

但是你的代码是：

<link rel="stylesheet" href="assets/less/main.less" />
           ^^^^^^^^^^

和：

确保在脚本之前包含样式表。

...但反过来说：

<script src="assets/js/less.min.js"></script>
<link rel="stylesheet" href="assets/less/main.less" />

总结：不要猜测:)

score 1 · Accepted Answer

浏览器不知道 .less 扩展名。你只需要给他们编译的css。

LESS 和 SASS 旨在帮助您更快地编码，而不是作为 CSS 的替代品。

3 回答 3