2012-06-06 16 views
6

Me preguntaba si es posible modificar el color del degradado Less mixin aplicando algo como aclarar u oscurecer el código CSS.CSS Gradients - Less Mixins

Aquí es el menos Mixin:

.css-gradient(@from: #20416A, @to: #3D69A5) { 
    background-color: @to; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); 
    background-image: -webkit-linear-gradient(top, @from, @to); 
    background-image: -moz-linear-gradient(top, @from, @to); 
    background-image: -o-linear-gradient(top, @from, @to); 
    background-image: -ms-linear-gradient(top, @from, @to); 
    background-image: linear-gradient(top, @from, @to); 
} 

y en menos de archivos me gustaría hacer algo como esto:

#div { 
    width:100px; 
    height:100px; 
    .css-gradient (darken, 10%); 
} 

No sabe si esto es posible o si hay otro forma en que debería hacer esto.

+0

No estoy muy seguro de lo que le gustaría lograr con la función del obscurecer, tal vez usted podría proporcionar una muestra de menos y css código correspondiente. Eso haría las cosas más claras. – topek

Respuesta

13

que haría este modo:

.css-gradient(darken(#20416A,10%),darken(#3D69A5,10%)) 

Por supuesto, también podría hacer:

.css-gradient(@from: #20416A, @to: #3D69A5) { 
    background-color: @to; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); 
    background-image: -webkit-linear-gradient(top, @from, @to); 
    background-image: -moz-linear-gradient(top, @from, @to); 
    background-image: -o-linear-gradient(top, @from, @to); 
    background-image: -ms-linear-gradient(top, @from, @to); 
    background-image: linear-gradient(top, @from, @to); 
} 
.css-gradient(darken,@amount: 10%, @from: #20416A, @to: #3D69A5){ 
    .css-gradient(darken(@from,@amount),darken(@to,@amount)); 
} 

Y luego simplemente llamarlo:

.css-gradient(darken,10%); 

o:

.css-gradient(#20416A, #3D69A5); 

o:

.css-gradient(darken,5%,#00ff00,#ff0000); 
+0

Muchas gracias. Esto funciona perfectamente! – user965879