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

Question

简介：

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

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

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

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

问题：

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

想法：

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

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

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

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

Answer 1

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

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

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

会让你少用下面的：

@foo = bar;

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

有问题的代码非常简单： https://github.com/ dotless/dotless/blob/master/src/dotless.Core/Engine/ParameterDecorator.cs

Answer 2

AFAIK，您无法传递用于 dotnetless 的参数来进行编译。

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

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

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

我刚刚在 MVC3 项目上测试了它并且它有效。