CSS3 Background Mixins

I've been extensively using SASS mixins to speed up CSS editing for personal and outside projects. Mixins don't only make it easier for you to include a bit of CSS into your project, but can help account for a the different ways browsers are currently supporting CSS3.

Current implementation of CSS3 gradient backgrounds:

@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);
}

The first background $middle, will account for browsers currently not supporting gradient backgrounds.

If you want a striped background, here's what I use:

@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);
}

Again, it's good to have some fall backs for browsers that aren't supported. That way you don't have to worry about manually supporting older browsers.