Tenho usado extensivamente os mixins SASS para acelerar a edição de CSS para projetos pessoais e externos. Mixins não apenas tornam mais fácil incluir um pouco de CSS em seu projeto, mas podem ajudar a explicar as diferentes maneiras como os navegadores estão atualmente suportando CSS3.
Implementação atual de fundos gradientes CSS3:
@mixin gradient-background($top, $middle, $bottom) {
background: $middle;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.01, $bottom), color-stop(0.64, $middle), color-stop(1, $top));
background-image: -moz-linear-gradient(top, $top, $middle, $bottom);
}O primeiro fundo $ middle, será responsável por navegadores que atualmente não suportam fundos gradientes.
Se você quiser um fundo listrado, aqui está o que eu uso:
@mixin striped-background($color_1, $color_2, $stripe_width: 20px) {
background-color: $color_1;
background-image: -webkit-repeating-linear-gradient(135deg, transparent, transparent $stripe_width, $color_2 $stripe_width, $color_2 2 * $stripe_width);
background-image: -moz-repeating-linear-gradient(135deg, transparent, transparent $stripe_width, $color_2 $stripe_width, $color_2 2 * $stripe_width);
}Novamente, é bom ter alguns recursos para navegadores que não são compatíveis. Dessa forma, você não precisa se preocupar em suportar manualmente os navegadores mais antigos.