我可以在 LESS css 中使用 url 参数吗？答案

【问题标题】：Can I use url parameters in LESS css?我可以在 LESS css 中使用 url 参数吗？
【发布时间】：2012-03-03 14:13:21
【问题描述】：

简介：

我正在 asp.net mvc 环境中尝试 LESS。

我使用 dotless 进行服务器端处理（我不想使用客户端处理，尤其是在发布完整项目之后）。

我必须根据不同的事物（例如一天中的时间）应用不同配色方案的设计。

在这种情况下感觉不太强大，因为设计一个参数化的 css 并且只在每个主题的文件开头更改大约 10 个变量确实令人振奋。

问题：

但我需要通过外部参数以某种方式更改颜色主题。

想法：

首先我认为像 style.less?theme=fuschia 这样的 URL 参数会很好，但我发现没有办法解析这样的东西。

然后我认为制作一个非常短的 blue.less、green.less、orange.less 只包含声明的颜色变量，并在每个变量中包含 main.less 将是一个可靠的解决方案。

我没有机会尝试第二种解决方案，但我认为现在是寻求建议的最佳时机。

问题又是：我想从外部控制我的less文件中的一些东西。

【问题讨论】：

【解决方案1】：

AFAIK，您不能为 dotnetless 传递参数以用于编译。

作为一个建议，为什么不直接调用不同的 less 文件呢？使用 Viewbag 属性很容易做到这一点。

要制作不同的less，首先创建一个less文件，其中包含每组颜色。然后你导入你的基本 css 文件。 dotnetless 会将父文件中的颜色定义与基本文件中的用法合并。所以你有类似的东西 -

@baseGray: #ddd;
@baseGrayDark: darken(@baseGray, 15%);
@baseGrayLight: lighten(@baseGray, 10%);
@import "baseCss.less";

我刚刚在 MVC3 项目上对此进行了测试，它可以工作。

【讨论】：

【解决方案2】：

是的，您可以（因为我实现该功能正是出于这个原因）。

Dotless 通过查询字符串参数支持来自外部的参数。

<link rel="stylesheet" href="style.less?foo=bar" />

会让你少用以下：

@foo = bar;

参数注入代码很简单。它只是将变量声明添加到您的普通 less 文件中，因此任何作为查询字符串参数出现的内容都将遵循上述语法。

【讨论】：

这就是我希望的答案！ :D
@Tigraine：这是如何保存的？攻击者可以轻松地将恶意代码注入样式表。
使用它并不是那么简单。我必须在包含@theme: dark; 的行@import "darkly-variables-@{theme}.less"; 上方创建一个@import "theme-param-default.less";，否则会出现编译问题。