Come chiamare MENO mixins gradiente di bootstrap

Question

Il Bootstrap gradiente verticale mixin è definito come segue:

#gradient { 
    .vertical (@start-color, @end-color) when (@disable-filters) { 
    /* code */ 
    } 
} 

Sto chiamando .#gradient > .vertical(#fff, #ddd); nel mio MENO. Ma la compilazione mi dà il seguente errore.

ParseError: Syntax Error on line 104 in front.less:104:8 
103   border-bottom: 2px solid white; 
104   .#gradient > .vertical(#fff, #ddd); 
105  } 

Commentando la riga sopra risolve il problema. Qual è il modo corretto di invocare il mixin del gradiente verticale di Bootstrap?

Answer 1

Penso che ci possa essere un errore di battitura nei documenti Bootstrap v2.2.2 per alcuni mixin di gradienti. Se si controlla il file mixins.less sembra che non sia necessario il punto iniziale quando si chiama il mixin del gradiente, ad esempio #gradient> .vertical (# 999, #fff);

Ho questo funzionamento.

in una pagina HTML Ho un div con ID = gradiente-test

Nel mio mixin personalizzato ho:

#gradient-test{ 
#gradient > .vertical(#999, #fff); 
} 

Buona fortuna!

Answer 2

l'idea è la stessa in Bootstrap 3 (come suggerito David Taiaroa) e in più ci sono due parametri aggiuntivi che è possibile passare a controllare come il gradiente ha:

.vertical(@start-color; @end-color; @start-percent; @end-percent) 

Così, per esempio si può fare qualcosa di simile al seguente nel file custom.less:

@import '../less/bootstrap.less'; 

.promo-content{ 
    #gradient.vertical(#fff; #c3c3c3; 0%; 10%); 
    height:100px; 
    .text-center; 
    padding-top: 25px; 
    margin-bottom: 10px; 
    border:1px solid #e2e2e2; 
} 

.promo-content2{ 
    #gradient.vertical(#fff; #c3c3c3; 0%; 90%); 
} 

E si ottengono i seguenti risultati: