How to avoid duplication of styles in SCSS?

Question

I want to have one .scss file with some varibles for all the rest .scss files. But if I do so its .scss styles are duplicated in all my .scss files:

global.scss - my global variables and styles file

$white: #FFF;
$black: #000;
$bg_red: red;

.mt30 {
    margin-top: 30px;
}

header.scss - I want to use global vars and styles in this file.

@include "global"

.foo {
    width: 100px;
    height: 50px;
    backgrounnd-color: $bg_red;
}

main.scss - I want to use global vars and styles in this file too.

@include "global"

.boo {
    width: 100px;
    height: 50px;
    backgrounnd-color: $white;
}

But each final .css file has styles from global.scss. So I have several .mt30 styles on my page. How to avoid it?

Answer 1

It seems that the issue isn't the duplication of styles, but the duplication of libraries, or configuration files. For that, all it takes is to just structure your code a little differently. Start by making your global.scss file a partial by changing its name (as well as all the other pieces) to start with an underscore, _global.scss. Then, create a manifest file, like app.scss. Inside there, import _global.scss and whatever other files you need. Those other files will now have access to everything that app.scss has access to:

_global.scss

$white: #FFF;
$black: #000;
$bg_red: red;

_header.scss

.foo {
  width: 100px;
  height: 50px;
  background-color: $bg_red;
}

_main.scss

.mt30 {
  margin-top: 30px;
}

.boo {
  width: 100px;
  height: 50px;
  background-color: $white;
}

app.scss

// Import libraries and config; adding compass as an example
@import "global";
@import "compass/css3";

// Actual selectors
@import "header";
@import "main";

Because you're importing global before header and main, the latter two will have access to whatever's in the former. Also to note is that I moved the one declared style, .mt30, out from global into the main partial, only to make sure no styles were being declared in the global config file.