Sass partial importing

Question

I have an issue with sass compilation.

When I have a project with a partial _partial.scss and have it imported in multiple partial files (because it contains color variables) it will end up in the compiled css multiple times!

This is ugly because the same rule will 'overrule' itself multiple times which makes debugging info (chromium dev tools / firebug) rather unreadable.

I presume there is a solution for all this. I just can't find anything on the issue, anywhere.

Brutality

Answer 1

The solution is to either not include the same file multiple times or don't have any code that directly outputs CSS in the file you're planning on including more than once. If your variables were in a file by themselves, they could be safely included anywhere you'd like without selector duplication.

Monosome

What about css classes needed for extension in multiple files? – Brutality

The extend classes (%example) have the same problem with code duplication. If you include %example 3 times and extend it, it will show up in your code 3 times. – Monosome

Oke, that would make your answer a partial solution. Since sass could figure out at compile time how the include tree looks like, it shouldn't have to include any file multiple times. – Brutality

But what if I do want to be able to include a file multiple times on purpose? For example, @extend cannot be used across media queries but I need a %clearfix both inside and outside of media queries. Rather than type out a definition for %clearfix inside my media query, I could just include it a 2nd time so that its in scope. – Monosome

to satisfy both concerns, something similar to !default for imports would be nice. (e.g., if not already imported, import) – Ammoniac

Answer 2

Maybe this @mixin helps you: https://github.com/wilsonpage/sass-import-once.

Have a look at the example and note how the reset is only included once in the final CSS.

Stablish

Best. Plugin. Ever. Be sure to use the master branch (bower install sass-import-once#master) to prevent conflicts. – Sedimentology

Answer 3

It seems that just for this, sass (and thus, scss) now have @use instead of @import. From the @use documentation (emphasis is mine):

The simplest @use rule is written @use "", which loads the module at the given URL. Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.

Sass also discourages further use of @import:

The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead.

Any projects having this problem could try running the module migrator tool and check if the problem is resolved.

Job

Answer 4

You might want to take a look at SASS Modules. There are two rules which both solves the constant overrule problem.

Rule @use and rule @forward both load the given styles only once, even if you use them multiple times in different files in your project. Both rules allow you using private styles and namespaces.

Example

// declare it like so
@use 'src/styles/ui/buttons' as Buttons;

.form-button {
  // then call it when needed
  @include Buttons.buttonTemplate;

  &-location {
    // use several values if you want to
    @include Buttons.buttonTemplate;
    @include Buttons.buttonDark;
    @include Buttons.buttonDarkAnimated;
  }

}

More information

https://css-tricks.com/introducing-sass-modules/

Take a look at the official documentation:

https://sass-lang.com/documentation/at-rules/use/

https://sass-lang.com/documentation/at-rules/forward/

Ioves

Answer 5

You can simply import your _partial.scss on your main style scss since this is a setting of variables or on the top of each page rather than importing it in multiple partial files.

Obolus