Gradiente linear usando MENOS

Para criar fundos com gradiente linear usando apenas duas interrupções, você pode escrever o seguinte mixin :

.linearGradient(@angle, @from, @to) {
background
-image: -webkit-linear-gradient(@angle, @from, @to);
background
-image: -moz-linear-gradient(@angle, @from, @to);
background
-image: -ms-linear-gradient(@angle, @from, @to);
background
-image: -o-linear-gradient(@angle, @from, @to);
background
-image: linear-gradient(@angle, @from, @to);
}

Para montar suas regras CSS, utilize:

.gradient1 {
.linearGradient(top, #fff, #000);
}
.gradient2 {
.linearGradient(45deg, #fff, #000);
}

Agora, se você pretende criar fundos com gradiente linear que utilizam múltiplas interrupções (2 ou mais), o seu mixin deve ser:

.linearGradient(@angle, @colorStops) {
background
-image: -webkit-linear-gradient(@angle, @colorStops);
background
-image: -moz-linear-gradient(@angle, @colorStops);
background
-image: -ms-linear-gradient(@angle, @colorStops);
background
-image: -o-linear-gradient(@angle, @colorStops);
background
-image: linear-gradient(@angle, @colorStops);
}

Suas regras CSS ficarão assim:

.gradient1 {
.linearGradient(top, ~"#fff, #ff0 25%, #f00 50%, #000 75%");
}
.gradient2 {
.linearGradient(45deg, ~"#fff 100px, #ff0 200px, #000");
}

Neste segundo caso, você pode usar quantas interrupções (stop colors) para necessário para montar seu gradiente de fundo.