在背景圖像中添加一個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; 
}