CODEWITHSUNDEEP
csssass
A.J.Rouvoet
A.J.Rouvoet

Reputation: 1213

Sass partial importing

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.

Upvotes: 2

Views: 3892

Answers (5)

bellabelle
bellabelle

Reputation: 926

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.

Upvotes: 0

Alex Volkov
Alex Volkov

Reputation: 1

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/

Upvotes: 0

Pieter De Bie
Pieter De Bie

Reputation: 1212

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.

Upvotes: 0

Ruben
Ruben

Reputation: 65

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.

Upvotes: 2

cimmanon
cimmanon

Reputation: 68319

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.

Upvotes: 8

Related Questions