如何在 CSS 中使用 Less 变量答案

【问题标题】：How to use Less variables in CSS如何在 CSS 中使用 Less 变量
【发布时间】：2015-02-24 04:04:35
【问题描述】：

好的，所以我对使用 Bootstrap 并不陌生，但我对自定义它和使用 LESS 变量并不陌生。我正在尝试做最简单的事情，只是为了检查 LESS 变量是否正常工作。

我试图将正文的背景颜色设置为 @brand-success 只是为了测试它。它不工作。 Chrome 告诉我这是一个无效的属性值。

我知道我之前在 jQuery 中使用过 Bootstrap 中的 LESS 变量，但我认为 CSS 文件的工作方式相同。

我不确定它是否有任何区别，但我在本地使用 bootstrap.css 文件，而不是像我使用 jQuery 文件那样从外部服务器链接它。

我不知道这是否是重复的问题。我尽力寻找答案，但问题似乎都与我的不同。

【问题讨论】：

这样不行。您可以在更少的文件中使用它。但不在 css 文件中。
你知道一个很好的资源来学习如何做到这一点。我找到了一个 youtube 视频，但我想确保它是准确的@sanjithedward
喜欢lesscss.org ?
您是否编辑了 variables.less 文件？您可能只需要编译它...查看 gulp smashingmagazine.com/2014/06/11/building-with-gulp。颜色 less 的变量语法应该是 @brand-success: #45ADFF;
当然less官方网站提供了很多例子和方法。但是，我认为您不能将它们包含在 css 中，因为 css 是样式表而不是编程语言或至少是预处理器

【解决方案1】：

Less 是一个 CSS 预处理器。你可以在 Less 中使用纯 CSS，所以 CSS is less，但反之则不然。 Chrome 不知道 Less 是什么。它只解释 CSS。 @brand-sucess 不是有效的 CSS。

它可能在 PHP 中有效，因为您的 PHP 应用程序之前可能在将 CSS 文件发送到客户端之前运行了较少的预处理器。

如果您使用的是客户端 Less 预处理器，它可能在 JQuery 中有效。在这种情况下，您可以将 LESS 直接发送到客户端，但首先必须将其转换为真正的 CSS 颜色（例如：#58fe23），然后 Chrome 才能对其进行任何操作。

【讨论】：