我想导入一个由 DB 生成的变量 less 文件,以供我的其他 less 文件使用。这将为我的应用程序提供一些高级变量。导入这些的最佳方法是什么?我尝试过类似@import "http://server.com/foo.less"
没有成功的事情。
该文件如下所示:
@fontColor: #EEE;
@fontSize: 10px;
产生于
@fontColor: {{fontColor}}
@fontSize: {{fontSize}}
我想导入一个由 DB 生成的变量 less 文件,以供我的其他 less 文件使用。这将为我的应用程序提供一些高级变量。导入这些的最佳方法是什么?我尝试过类似@import "http://server.com/foo.less"
没有成功的事情。
该文件如下所示:
@fontColor: #EEE;
@fontSize: 10px;
产生于
@fontColor: {{fontColor}}
@fontSize: {{fontSize}}
使用 Asp.net,您的服务器可以动态生成 less 文件。但我认为其他技术也可以。
家庭控制器
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult StyleMeFromCshtml()
{
Response.ContentType = "text/css";
return View(new StyleModel());
}
索引.cshtml
<!DOCTYPE html>
<html>
<head>
<title>test less</title>
<link rel="stylesheet/less" type="text/css" href="/Home/StyleMeFromCshtml" />
<script src="~/Scripts/less-1.4.2.js"></script>
</head>
<body>
<div class="styleMeLess">
I'm styled
</div>
</body>
</html>
样式模型.cs
public class StyleModel
{
public string BackgroundColor
{
get
{
// or get the value from the DB
var random = new Random();
var toArgb = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256));
return toArgb.Name.Remove(6, 2);
}
}
}
StyleMeFromCshtml.cshtml 在 cshtml 中的伪装较少
@model lessTest.Models.StyleModel
@{
Layout = null;
}
.styleMeLess{
background-color: #@Model.BackgroundColor
}
每次调用索引都会在服务器上生成随机颜色。但颜色值也可能来自数据库。诀窍是在响应中 contentType 设置为“text/css”。
或者直接返回 less 字符串:
public ActionResult StyleMe()
{
var random = new Random();
var toArgb = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256));
string style = String.Format(".styleMeLess{{ background-color: #{0} }}", toArgb.Name.Remove(6,2));
return Content(style, "text/css");
}
您需要使用 url() “函数”来执行此操作
@import url("http://localhost/foo.less");
这将在编译时导入您的 less 文件,这会根据您的请求得到响应的速度减慢进程。之后,此文件中的所有变量都将可用于您当前的范围。很可能,这也适用于mixins,但我没有对此进行测试。
假设您有权获取server.com
文件(我假设您这样做),并且您的路径是正确的(并且我假设是正确的),在我看来,需要更正的一个错误是文件应该看起来像(注意冒号的添加):
@fontColor: #EEE;
@fontSize: 10px;
我不知道这是否意味着您需要将生成代码更改为:
@fontColor: {{fontColor}}
@fontSize: {{fontSize}}
我对双括号的含义不够熟悉{{...}}
,但我认为这就是数据库如何从中提取信息以放入.less
正在生成的文件中的方式。如果是这样,那么在那里添加冒号应该可以解决 LESS 期望变量定义的内容,并且可以解决您的问题。