SCSS Placeholders compiled in wrong order

Question

I have forked Zurb's Foundation to use SCSS %placeholder selectors and avoid using column classes in my markup.

You can see here how I generate the placeholders using loops. The thing is, when I extend multiple column placeholders, the "small range" one is compiled at the end instead of first (thus overriding the other selectors).

.main-menu-wrapper { @extend %small-12; @extend %medium-6; @extend %large-6; }

If I move the medium or large placeholders up and down in the loop, their compile order is changed too (as expected). However, the small ones are always compiled last, no matter where they are placed. The only way I have to make it compile first is to create a separate loop.

Any ideas why this happens?

Answer 1

Ok, I now realize it's obvious why the small one is compiled last: its number is higher. I need to build a loop for each of the ranges so they are compiled first from 1 to 12 BEFORE stepping to the next range. Otherwise, large-1 is going to be compiled before small-2.