[Less] 簡單做到背景漸層

對選顏色不擅長，又想在網頁做出 CSS 漸層效果，Less 提供了兩個方便的函數 lighten(加亮顏色)、darken(加深顏色)，透過這兩個函數就可以輕鬆產生漸層所需要的色差，然後調整百比值就可以控制漸層的色階。

原始碼

1. .toolbar { 
2.    @color: #914; 
3.    @lighten: lighten(@color, 3%); 
4.    @darken: darken(@color, 3%); 
5.  
6.    background-color: @color; 
7.    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken)); 
8.    background-image: -webkit-linear-gradient(top, @lighten, @darken); 
9.    background-image: -moz-linear-gradient(top, @lighten, @darken); 
10.    background-image: -ms-linear-gradient(top, @lighten, @darken); 
11.    background-image: -o-linear-gradient(top, @lighten, @darken); 
12.    background-image: linear-gradient(to bottom, @lighten, @darken); 
13. } 

.toolbar {
    @color: #914;
    @lighten: lighten(@color, 3%);
    @darken: darken(@color, 3%);

    background-color: @color;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
    background-image: -webkit-linear-gradient(top, @lighten, @darken);
    background-image: -moz-linear-gradient(top, @lighten, @darken);
    background-image: -ms-linear-gradient(top, @lighten, @darken);
    background-image: -o-linear-gradient(top, @lighten, @darken);
    background-image: linear-gradient(to bottom, @lighten, @darken);
}

上面除了用 linear-gradient 來產生漸層，額外還加上了 background-color 這個保險，讓不支援 CSS3 的 browser 也能有基本的底色。


這樣寫還是有點麻煩，如果包成 mixin 會更方便，如下：

原始碼

1. .bg-vertical-gradient(@color, @amount:3%) { 
2.    @lighten: lighten(@color, @amount); 
3.    @darken: darken(@color, @amount); 
4.  
5.    background-color: @color; 
6.    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken)); 
7.    background-image: -webkit-linear-gradient(top, @lighten, @darken); 
8.    background-image: -moz-linear-gradient(top, @lighten, @darken); 
9.    background-image: -ms-linear-gradient(top, @lighten, @darken); 
10.    background-image: -o-linear-gradient(top, @lighten, @darken); 
11.    background-image: linear-gradient(to bottom, @lighten, @darken); 
12. } 
13.  
14. .toolbar { 
15.    .bg-vertical-gradient(#914); 
16. } 
17.  
18. .banner { 
19.    .bg-vertical-gradient(#702, 5%); 
20. } 

.bg-vertical-gradient(@color, @amount:3%) {
    @lighten: lighten(@color, @amount);
    @darken: darken(@color, @amount);

    background-color: @color;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
    background-image: -webkit-linear-gradient(top, @lighten, @darken);
    background-image: -moz-linear-gradient(top, @lighten, @darken);
    background-image: -ms-linear-gradient(top, @lighten, @darken);
    background-image: -o-linear-gradient(top, @lighten, @darken);
    background-image: linear-gradient(to bottom, @lighten, @darken);
}

.toolbar {
    .bg-vertical-gradient(#914);
}

.banner {
    .bg-vertical-gradient(#702, 5%);
}