CODEWITHSUNDEEP
visual-studio-2012sassmindscape
Exitos
Exitos

Reputation: 29720

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

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?

Upvotes: 0

Views: 288

Answers (2)

Paul Wellner Bou
Paul Wellner Bou

Reputation: 554

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/

Upvotes: 0

imjared
imjared

Reputation: 20554

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.

Upvotes: 0

Related Questions