Question

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

参考之前提出的关于添加渐变混合的问题，我的尝试是将渐变写为mixin然后将其分配给我的mixin文件中的@ body-bg，但是编译器为＃39引发了错误;无法识别的输入＆＃39;在我想将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%);
}

根据我得到的错误，是否不能将mixin分配给Less中的默认变量？我注意到如果我只引用#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。换句话说，为主体分配渐变背景的最简单方法是直接使用旧的好的CSS级联，即：

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

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

1 个答案: