尝试使用SASS避免重复背景

Question

我在SASS中经常使用background-size，每次需要使用时重复声明。

理想情况下，我想用一个独特的类来编写声明一次并将其扩展到其他地方。我在下面尝试过一些不起作用的东西。当您将其包含在同一规则集中时，background-size似乎才有效。

这背后的主要原因是减少CSS输出。

以下是我通常会写的内容：

.banner { 

    &.one {
        background: url(link-to-img-1.jpg) no-repeat 0 0;
        background-size: 500px auto;
    }

    &.two {
        background: url(link-to-img-2.jpg) no-repeat 0 0;
        background-size: 500px auto;
    }

}

以下是我想写的不起作用的内容：

%background-size {
    background-size: 500px auto;
}
.banner { 

    &.one {
        background: url(link-to-img-1.jpg) no-repeat 0 0;
        @extend %background-size;
    }

    &.two {
        background: url(link-to-img-2.jpg) no-repeat 0 0;
        @extend %background-size;
    }

}

这可能吗？我已经设置了一支笔来说明问题：http://codepen.io/abbasinho/pen/ZYaGJb