css - Strange SASS output when using extends -

i have following sass files

_android.scss:

$width: 111px; @import 'child';  .android .child {     @extend %child; } 

_ios.scss:

$width: 999px; @import 'child';  .ios .child {     @extend %child; } 

_child.scss:

%child {     width: $width; } 

app.scss:

@import 'ios'; @import 'android'; 

now when run sass get:

$> sass app.scss .ios .child, .android .child {    width: 999px; }  .ios .child, .android .child {    width: 111px; } 

not expected, is

.ios .child {     width: 999px; }  .android .child {     width: 111px; } 

what wrong here ?

it's because @extends processed first found in sass, selectors in used grouped @ point (@extends bit greedy) , you're including @extends placeholder twice.

let's step through happens:

1. ios.sass loaded, sets $width , includes %child
2. sass encounters placeholder because of includes, looks through code, get's instances of placeholder, groups selectors , uses current value of width.
3. next android.sass loaded, $width set new value , %child included again.
4. sass repeats step 2. each time @extends encountered instances of grouped , output values in placeholder.

this why when @ output see both selectors grouped , group repeated twice each of $width values defined.

what fix it

a mixin best here. when mixin encountered evaluated on spot , resulting property set injected selector.

@mixin width($width-in: 1000px) {     width: $width-in; }  .ios .child {     @include width(111px); }  .android .child {     @include width(999px); } 

now, let's step through mixin example

1. the mixin loaded, sass knows it, doesn't - think of function waiting called
2. ios.sass loaded , selector defined
3. sass sees call mixin parameter, takes parameter, uses mixin , injects returned width value selector
4. android.sass loaded ...
5. sass sees call mixin , repeats process, injecting new value of width new selector.

ps in mixin definition use default value of 1000px, used if @include width(); called.