2012-06-06 24 views
6

Ich habe mich nur gefragt, ob es möglich ist, die Farbe des Less-Mixin-Farbverlaufs zu ändern, indem man den CSS-Code etwas aufhellt oder dunkler macht. HierCSS-Verläufe - weniger Mixins

ist die weniger 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); 
} 

und in weniger Datei würde Ich mag so etwas tun:

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

Sie wissen nicht, ob dies möglich ist oder ob es eine andere ist So sollte ich das machen.

+0

Ich bin nicht ganz sicher, was Sie mit der Funktion verdunkeln erreichen möchten, vielleicht könnten Sie eine Probe liefern weniger und CSS-Code entspricht. Das würde die Dinge klarer machen. – topek

Antwort

13

ich dies tun würde, etwa so:

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

Natürlich können Sie auch tun:

.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)); 
} 

Und dann rufen Sie einfach an:

.css-gradient(darken,10%); 

oder:

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

oder:

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

Vielen Dank. Das funktioniert perfekt! – user965879