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?

Gadmann

I don't understand the problem here. You don't want duplicate information, but you understand how imports work. If you want to import a file multiple times, don't put code in it that you don't want duplicated. – Rind

"each final .css file" - Why do you have more than one CSS file? You should only have one complied file which is created from a single 'main' SCSS file after importing all of the sub-SCSS files - sitepoint.com/architecture-sass-project – Disease

@cimmanon, Hey, it is an examle. The real thing is that SCSS, Compass, Assetic are not good enough. If I need a variable from one main file in some other files, I have to import that main file in each other file. So for example with scss bootstap I have all bootstrap's styles duplicated in every file on the page when I need bootstrap's vars in my each file. How to avoid it? Why these tools include styles again if styles are already imported once somewhere? – Gadmann

Duplicate: #18408824 – Rind

@Disease there are some suggestions of multiple css files per page, for example, delivering an above the fold file, and / or a global file and a page specific file in order to optimise file sizes – Inferential

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.

Marjoram

why do you have to move .mt30 out from _global.scss? – Prowel

Answer 2

For example: Foundation framework has app.scss file. It first imports settings then foundation. After this you can add your app specific rules.

settings contains settings for all Foundation components and doesn't inflate resulting css. foundation file contains set of separated imports for the individual components like grid, buttons etc. Those components are configured by the previously imported settings file. To reduce css file size you can remove imports for the unnecessary components.

Actually, to make it more accessible, user removes foundation import and replace it with individual imports of the components that are commented out be the default.

Coaxial

Answer 3

There's a thing that you can use for that, it's import-once:

https://rubygems.org/gems/compass-import-once

Usage

To use with the Sass command line:

sass -r 'compass/import-once/activate' ...

To enable in non-compass environments:

require 'compass/import-once/activate'

You can read more information on this here: http://rubydoc.info/gems/compass-import-once/1.0.5/frames

Inkhorn

Answer 4

I suggest you learn the @use technique, it will make things easier for you, and stop using the @import itself, here is a helpful resource https://www.youtube.com/watch?v=CR-a8upNjJ0

Pekin

Code examples would be useful: e.g. how/where to use @use – Smokejumper

please check the video @MiheyEgoroff – Pekin