Sass , compass , #include and #extend - sass

Question

I have problem with Sass and this is connected with creating sprites and then reusing compiled class later.
This my styles.scss:
#import 'buttons/*.png';
#include all-buttons-sprites;
#import 'partial/buttons';
And this is buttons.scss:
.buttons {
#extend .buttons-blue-button;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
cursor: pointer;
border: none;
font-size: 18px;
width: 242px;
height: 45px;
font: sky-text-med;
padding-bottom: 5px;
margin: 24px 4px 14px;
opacity: 0;
}
Compass not saying any errors but compile css is showing:
.buttons-sprite, .buttons-blue-button, .buttons, .buttons-blue-hover-button, .buttons-yellow-button, .buttons .yellow, .buttons-yellow-hover-button {
background: url('/welcome/assets/img/buttons-s5afcdf1a60.png') no-repeat; }
.buttons-blue-button, .buttons {
background-position: 0 0; }
.buttons {
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
cursor: pointer;
border: none;
font-size: 18px;
width: 242px;
height: 45px;
font: sky-text-med;
padding-bottom: 5px;
margin: 24px 4px 14px;
opacity: 0; }
But there is missing background with should be set by #extend .buttons-blue-button;
Why this isn't happening ?

Answer 1

.buttons {
#extend .buttons-blue-button;
...
}
You are telling the .button class to extend the .button-blue-button class.
.buttons-sprite, .buttons-blue-button, .buttons, .. {
background: url('/welcome/assets/img/buttons-s5afcdf1a60.png') no-repeat;
}
.buttons-blue-button, .buttons {
background-position: 0 0;
}
Compass is not making mistakes here, the background-image was set, the background-position was set too. Your expectations/assumptions & css-properties are Simply wrong.