/sass/recipes/background/_madras.scss

/**
 * Madras background pattern
 *
 * Before compass 0.11.5, you need to add
 * Compass::BrowserSupport.add_support("repeating-linear-gradient", "webkit", "moz", "o", "ms")
 * To your configuration (config.rb)
 * @see https://github.com/chriseppstein/compass/issues/401
 *
 * @link http://lea.verou.me/css3patterns/#madras
 *
 * @author Divya Manian http://nimbupani.com/ for the original pattern
 * @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
 */

@import "compass/css3/images";

@mixin background-madras($bg-color: hsl(34, 53%, 82%), $color1: $bg-color, $color2: $bg-color, $color3: $bg-color) {
    $transparent: rgba(black, 0);
    // calculate colors if specific colors aren't passed in
    @if ($color1 == $bg-color){
        $color1: change-color(rgba(complement($bg-color), 1), $saturation: 65%, $lightness: 10%, $alpha: 0.5);
    }
    @if ($color2 == $bg-color){
        $color2: adjust-color(rgba($bg-color, 1), $hue: -30, $lightness: -20%, $alpha: -0.5);
    }
    @if ($color3 == $bg-color){
        $color3: adjust-color(rgba($bg-color, 1), $saturation: 35%, $lightness: -20%, $alpha: -0.5);
    }
    background-color: $bg-color;
    @include background-image(
        repeating-linear-gradient(
            45deg,
            transparent 5px,
            $color1 5px,
            $color1 10px,
            $transparent 10px,
            $transparent 35px,
            $color2 35px,
            $color2 40px,
            $color1 40px,
            $color1 50px,
            $transparent 50px,
            $transparent 60px,
            $color2 60px,
            $color2 70px,
            $color3 70px,
            $color3 80px,
            $transparent 80px,
            $transparent 90px,
            $color2 90px,
            $color2 110px,
            $transparent 110px,
            $transparent 120px,
            $color1 120px,
            $color1 140px
        ),
        repeating-linear-gradient(
            135deg,
            transparent 5px,
            $color1 5px,
            $color1 10px,
            $transparent 10px,
            $transparent 35px,
            $color2 35px,
            $color2 40px,
            $color1 40px,
            $color1 50px,
            $transparent 50px,
            $transparent 60px,
            $color2 60px,
            $color2 70px,
            $color3 70px,
            $color3 80px,
            $transparent 80px,
            $transparent 90px,
            $color2 90px,
            $color2 110px,
            $transparent 110px,
            $transparent 140px,
            $color1 140px,
            $color1 160px
        )
    );
}