SCSS问题，在小提琴上工作，但不在本地

Question

我一直在寻找一个CSS做曲折边框的方法，稍后我在codepen上找到了这个例子，这里是http://codepen.io/anon/pen/artDy，但它没有包含透明度，所以我决定修改它，我想出了这个代码，对在线源工程完美（你可以尝试将其粘贴在链接，看看我定制）：

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

但是当我使用它在正常SCSS文件我的SCSS转换器告诉我，有一个未定义的mixin background。现在，我看到，实际上，mixin background没有在任何地方定义。

我怎样才能使它工作？

Answer 1

在线笔使用名为bourbon的mixin库，该库提供在笔中使用的background mixin。您可以安装波本宝石红宝石，然后将该库导入scss文件中。