在背景图像中添加一个LESS Bootstrap mixin

Question

我试图使用梯度LESS Bootstrap mixin的背景图像，但它不工作，我已将所有Bootstrap .less文件导入style.less文件，我的theme.less被导入（此文件）。每当我做了下面的咕噜任务跑步者，不编译theme.less文件。我有这样的代码：

@base-url: '../img/backgrounds'; 

body { 
    background: #gradient.directional(#333; #000; 45deg), url('@{base-url}/bus.jpg'), no-repeat center center fixed; /* fallback */ 
    background-size: cover; 
    overflow-x: hidden; 
} 

我也试过：

@base-url: '../img/backgrounds'; 

body { 
    #gradient.directional(#333; #000; 45deg), url('@{base-url}/bus.jpg'), no-repeat center center fixed; /* fallback */ 
    background-size: cover; 
    overflow-x: hidden; 
} 

在第二个例子中，编译器说，我有一个“）”缺少的行9列49

Answer 1

我得到了它现在，我所需要做的只是在“bootstrap/mixins/gradients”文件夹中修改bootstrap渐变mixin文件，我更改了mixin的名称并使用背景图像做了我自己的。像这样：

mymixins.less文件：

@base-url: '../img/backgrounds'; 

#gradient1 { 
    .directional1(@start-color: rgba(255,255,255, 1); @end-color: rgba(0,0,0,1); @deg: 45deg) { 
     background-repeat: repeat-x; 
     background: -webkit-linear-gradient(@deg, @start-color, @end-color),url('@{base-url}/bus.jpg'), no-repeat center center fixed; // Safari 5.1-6, Chrome 10+ 
     background: -o-linear-gradient(@deg, @start-color, @end-color), url('@{base-url}/bus.jpg'), no-repeat center center fixed; // Opera 12 
     background: linear-gradient(@deg, @start-color, @end-color), url('@{base-url}/bus.jpg'), no-repeat center center fixed; // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ 
    } 
} 

我theme.less文件：

.background { 
    #gradient1.directional1(rgba(255,255,255,0.3); rgba(0,0,0,0.3); 45deg); 
    background-size: cover; 
    overflow-x: hidden; 
}