How do I stop a file being imported more than once with SASS and Midscape?

Question

I am just learning Sass and have used the @import. I have the following situation...

_master.scss <-- this contains all my global variables like color

_child1.scss <-- this is for one of my child pages but it needs stuff from master

_child2.scss <-- this is for one of other my child pages but it also needs stuff from master

Now the problem is _master is getting quite big. So when I save my Scss files (the children) using Mindscape tools in Visual Studio 2012 I notice that the generated css files include ALL the css from the master file for both children.

Essentially I am getting duplicate css every time I want to reference the master file with '@import' which is not good for performance. Is there any way to avoid this?

score 0 · Accepted Answer · edited Oct 02 '13 at 16:52

0

If I'm understanding, it sounds like you could really benefit from better use of partials. If You don't want all of _master.scss to be imported, you should break it apart into components and then import those as you need them.

For example, if master.scss contains all the fonts on your site, the colors, and the column layout, you could break it down to something like the following:

_fonts.scss
_colors.scss
_column.scss

In master.scss, you'd import each. Then you could import these smaller files into child1 and child2 as you need them.

If this isn't what you're looking for, please try clarifying your question and I might be able to help a bit more.

UPDATE: After discussing with Imjared he said that I should just create a file with variables in only. This would seem to work for me so I am updating this answer and marking it as correct.

edited Oct 02 '13 at 16:52

Exitos

29,230
38
123
178

answered Sep 30 '13 at 17:38

imjared

19,492
4
49
72

Yeah this is what I have done. So if I do as you have said and I want to use a variable for $black. And that variable is in _fonts.scss AND it is in _colours.scss AND it is is Child 1. then I still have to import master into all .scss sheets don't i? – Exitos Oct 01 '13 at 04:44
Why not just have _variables.scss and import *that*? Imports aren't necessarily a bad thing if they're just importing non-compiled content. – imjared Oct 01 '13 at 11:57

score 0 · Answer 2 · answered Jun 11 '15 at 05:39

I solved this duplicate SCSS using this snippet to import content:

// src/main/scss/import-once-workaround.scss
$imported-once-files: () !default;

@function not-imported($name) {
  $imported-once-files: $imported-once-files !global;
  $module_index: index($imported-once-files, $name);
  @if (($module_index == null) or ($module_index == false)) {
    $imported-once-files: append($imported-once-files, $name);
    @return true;
  }
  @return false;
}

Importing files are done then by:

@if not-imported("font") { @import "font"; }

I used this approach instead of Zurb's to get StyleDocco work, see http://paul.wellnerbou.de/2015/05/18/avoid-multiple-imports-of-the-same-scss-file-with-sass/

How do I stop a file being imported more than once with SASS and Midscape?

2 Answers2

Linked