我一直在寻找一种只用CSS做zig zag边框的方法,稍后我在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
没有在任何地方定义。
我怎样才能让它发挥作用?
答案 0 :(得分:2)
在线笔使用名为bourbon的mixin库,它提供笔中使用的background
mixin。您可以安装bourbon ruby gem,然后在scss
文件中导入库。