Question

我想导入一个变量较少的文件，该文件是由DB生成的文件，供我的其他较少的文件使用。这将为我的应用程序提供一些高级变量。导入这些的最佳方法是什么？我尝试过像@import "http://server.com/foo.less"这样的事情没有成功。

该文件看起来像：

@fontColor: #EEE;
@fontSize: 10px;

从

生成

@fontColor: {{fontColor}}
@fontSize: {{fontSize}}

Answer 1

使用Asp.net，您的服务器可以动态生成较少的文件。但我认为使用其他技术也是可能的。

的HomeController

    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult StyleMeFromCshtml()
    {
        Response.ContentType = "text/css";
        return View(new StyleModel());
    }

Index.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>

StyleModel.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”。

或者直接返回较少的字符串：

        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");
         }

Answer 2

您需要使用url（）“function”

执行此操作

@import url("http://localhost/foo.less");

这将在编译时导入较少的文件，这会根据请求的响应速度减慢进程。之后，此文件中的所有变量将可用于您当前的范围。很可能，这也适用于 mixins ，但我没有测试过。

Answer 3

假设您有权访问server.com以获取文件（我假设您这样做），并且您的路径正确（我认为是这样），在我看来，需要更正一个错误该文件应该是这样的（注意添加冒号）：

@fontColor: #EEE;
@fontSize: 10px;

我不知道这是否意味着您需要将生成代码更改为：

@fontColor: {{fontColor}}
@fontSize: {{fontSize}}

我对双括号意味着{{...}}的内容不够熟悉，但我认为数据库是如何从中提取信息以放入正在生成的.less文件中的。如果是这样，那么在那里添加冒号应该解决LESS期望定义的变量，并且可以解决您的问题。

如何生成动态LESS样式表？

3 个答案: