如何在CSS中使用Less变量

Question

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

我正在尝试将主体的背景色设置为@ brand-success，以进行测试。 它不起作用。 Chrome告诉我这是无效的属性值。

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

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

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

Answer 1

Less是CSS 预处理器 。 您可以在较少使用纯CSS，CSS所以是少了，但相反的是不正确的。 Chrome不知道什么是Less。 它仅解释CSS。 @brand-sucess无效的CSS。

它可以在PHP中工作过，因为很可能你的PHP应用程序发送的CSS文件给客户前在过去跑了较少的预处理器。

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