SCSS issue, works on fiddle but not on local

Question

I was looking for a CSS only way to do zig zag borders, and after a bit I found this example on codepen, here http://codepen.io/anon/pen/artDy, but it didn't include transparency, and so I decided to modify it and I came out with this code that works perfectly on that online source (you can try paste it in the link, and see my customization):

@mixin border-top-serrated($size, $color-outer) {
& {
    position: relative;
    padding-top: $size;
}  
&:before {
    top: 0px;
    @include background(linear-gradient(-135deg, $color-outer $size / 2, transparent 0), linear-gradient(135deg, $color-outer $size / 2, transparent 0));
    @include border-serrated-helper($size, $color-outer);
}}
@mixin border-bottom-serrated($size, $color-outer) {
& {
    position: relative;
    padding-bottom: $size;
}
&:after {
    bottom: -30px;
    background-position: right top;
    @include background(linear-gradient(4545deg, $color-outer $size / 2, transparent 0), linear-gradient(-4545deg, $color-outer $size / 2, transparent 0));
    @include border-serrated-helper($size, $color-outer);
}}
@mixin border-serrated-helper($size, $color-outer) {
content: " ";
display: block;
position: absolute;
left: 0px;
width: 100%;
height: $size;
background-repeat: repeat-x;
background-size: $size $size;}

.serrated {
background: #dddccf;
color: #aca8a1;
text-align: center;
@include border-bottom-serrated(32px, rgba(255, 0, 0, 0.3) );}

But when I use it on a normal SCSS file my SCSS converter tells me that there's an undefined mixin background. Now, I see that, in fact, the mixin background is not defined anywhere.

How can I get it to work?

Answer 1

The online pen is using a mixin library called bourbon which provides the background mixin being used in the pen. You can install the bourbon ruby gem and then import the library in your scss file.