2012-06-06 126 views
6

我只是想知道是否有可能通過應用像CSS或Lightning到CSS代碼的東西來改變較少mixin梯度的顏色?CSS漸變 - 少Mixins

這裏是少的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); 
} 

在更短的文件,我想這樣做:

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

不知道這是可能的,或是否有另一種我應該這樣做。

+0

我不太清楚你想要什麼,實現與變暗功能,也許你可以提供樣本少,相應的CSS代碼。這會讓事情更清楚。 – topek

回答

13

我會做到這一點,像這樣:

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

當然,你也可以這樣做:

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

然後叫它:

.css-gradient(darken,10%); 

或:

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

或:

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

非常感謝。這完美的作品! – user965879