/sass/recipes/background/_carbon-fiber.scss

 1/**
 2 * Carbon Fiber background pattern
 3 *
 4 * @author Lea Verou http://lea.verou.me/ for the original pattern
 5 * @author David Kaneda http://www.davidkaneda.com/ for the Sass mixin
 6 *
 7 * @link http://lea.verou.me/css3patterns/
 8 *
 9 */
10
11@import "compass/css3/images";
12
13$base-color: #222 !default;
14
15@mixin background-carbon-fiber(
16    $background-color: $base-color,
17    $dot-color: scale-lightness($background-color, -50),
18    $highlight-color: rgba(#fff, .1),
19    $spacing-size: 16px,
20    $dot-size: 2px
21) {
22    @include background-image(
23        radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size + 1),
24        radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size + 1),
25        radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size + 1px),
26        radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size + 1px)
27    );
28
29    background-repeat: repeat;
30    background-position: 0 0, $spacing-size/2 $spacing-size/2, 0 1px, $spacing-size/2 $spacing-size/2 + 1px;
31    background-color: $background-color;
32    background-size: $spacing-size $spacing-size;
33}