avoid duplication using placeholder selectors in Sass 3.2

Question

The problem is that my Sass code is generating duplicate declarations in the compiled CSS file. My Sass code is organized in multiple partials, and I @import them into a final screen.scss file

I have a _placeholders.scss which contains %alignright and %alignleft. I have a _content.scss file which uses these, so I @import "_placeholder.scss" at the top of that file and I do the same in _footer.scss. So I guess @import "_placeholders.scss" in 2 places is causing the duplication?

If I just @import "_placeholders.scss" at the beginning of screen.scss to make them globally accessible, then it messes with the order of the CSS declarations. The first CSS selector to use a placeholder selector will be inserted at the order where I @import "_placeholders.scss", instead of where I @import "_conntent.scss".

For example, in screen.scss:

@import "placeholders";
@import "reset";
@import "typography"
@import "content" // uses placeholder %alignleft
@import "footer" // uses placeholder alignleft

Generated CSS:

/* Content styles that use placeholders */
/* reset styles */
/* typography styles  */
/* expected order of content styles  */
/* footer styles  */

How do I avoid duplication and get the styles to be output in the correct place in the compiled CSS?

Answer 1

This is a place where you'd need to @include a @mixin rather than @extending a placeholder.

// in _placeholders.scss

@mixin alignleft {
    text-align: left;
}

// in _content.scss

div.whatever {
    @include alignleft;
}

// in _footer.scss

div.whatever-footer {
    @include alignleft;
}