Попытка избежать повторения размера фона с помощью SASS

Я часто использую 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