如何使用 Less 为背景颜色的默认变量添加渐变？

Question

我正在尝试更改 Bootstrap 3 的 variables.less 文件中的默认变量 @body-bg，以便我的背景是渐变色，但我运气不佳。

参考之前提出的关于添加渐变混合的问题，我尝试将渐变编写为混合，然后将其分配给混合文件中的@body-bg，但编译器抛出了“无法识别的输入”错误' 在我想将 mixin 分配给 @body-bg 的那一行。我的代码大致如下：

@import "../variables.less";
#gradient {
    .vertical(@start-color: #989ca0; @end-color: #234362; @start-percent: 0%; @end-percent: 100%) 
    {
          background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
          background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1+, Chrome 10+
          background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
          background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
    }
}

body {
    #gradient.vertical(#989ca0; #234362; 0%; 100%);
}

根据我得到的错误，是否不能在 Less 中将 mixin 分配给默认变量？我注意到，如果我只引用#gradient，代码会编译，尽管渐变肯定不会显示。

我还尝试在 .css 文件中找到 @body-bg 对应的内容，我认为这将是 body.background-color，但以下几行也不会添加渐变：

.body.background-color {
    #gradient.vertical(#989ca0; #234362; 0%; 100%);
}

感谢您对此问题的任何帮助，谢谢！

Answer 1

嗯，要意识到的重要一点是，Less 变量通常表示（并用作）CSS 属性 value(s)（尽管从最近的版本开始，也可以将任意规则集分配给也是一个变量）。现在，如果您查看 Bootstrap 源代码中 @body-bg is actually applied to the body 的方式，很明显您根本无法在其中使用 mixin。换句话说，为 body 分配渐变背景的最简单方法是直接使用旧的好的 CSS 级联，即：

body {
    #gradient.vertical(#989ca0, #234362, 0%, 100%);
}