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.