對選顏色不擅長，又想在網頁做出 CSS 漸層效果，Less 提供了兩個方便的函數 lighten(加亮顏色)、darken(加深顏色)，透過這兩個函數就可以輕鬆產生漸層所需要的色差，然後調整百比值就可以控制漸層的色階。
.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 會更方便，如下：
.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%);
}
