css - SASSを使用して背景サイズの繰り返しを回避しようとしています

Question

私はbackground-sizeSASS全体で多くのことを使用しており、使用する必要があるたびに宣言を繰り返しています。

理想的には、一意のクラスで一度宣言を記述し、それを別の場所に拡張したいと考えています。以下のことを試しましたが、うまくいきません。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