Last Updated: February 25, 2016
·
1.068K
· cleitonfco

Linear Gradient usando LESS

Para criar backgrounds 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 backgrounds 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 utilizar quantas interrupções (stop colors) for necessário para montar seu background gradiente.