css - 尝试使用 SASS 避免背景大小重复

Question

我background-size在我的 SASS 中使用了很多，每次我需要使用它时都重复声明。

理想情况下，我想用一个独特的类编写一次声明并将其扩展到其他地方。我在下面尝试了一些方法，但它不起作用。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