Feature request: @import-once

[seanofw]

I've used Sass on a number of projects now with great success, and finally convinced my company to use it on our flagship product --- a massive web application --- to make our 120,000 lines of CSS more manageable.

In doing so, I've found that there's a feature that would make for a really nice addition: The ability to mark some files with an "@import-once" directive, which causes that file to be imported only once no matter how many different other files import it.

Consider this scenario:

• _SharedBaseStuff.scss has a bunch of base definitions.
• _FooWidget.scss imports _SharedBaseStuff.scss
• _BarWidget.scss imports _SharedBaseStuff.scss
• YourPage.scss imports _FooWidget.scss
• MyPage.scss imports _BarWidget.scss
• TheirPage.scss imports both _FooWidget.scss and _BarWidget.scss

Without doing anything else, TheirPage.css will end up with two copies of any CSS found in _SharedBaseStuff.scss, which is undesirable. It'd be far better if inside _SharedBaseStuff.scss, you could just declare @import-once; at the top, which would ensure you only get the first copy in the output no matter how many times it's imported. (By definition, @import-once could not be appear inside an imported file that is nested within another selector or mixin; it could only appear at the root.)

(Yes, this is a real scenario on our huge site. In fact, our real-world scenarios are far uglier, with some .scss files able to be imported dozens of times or more by a single page's stylesheet.)

Currently, a little function like this can be used to implement a workaround:

$imported-once-files: ();

@function import-once($name) {
    @if index($imported-once-files, $name) {
        @return false;
    }
    $imported-once-files: append($imported-once-files, $name);
    @return true;
}

And then used like this:

@if import-once("_SharedBaseStuff.scss") {

    ...declare stuff that will only be imported once...

}

That works, but for large filesets with lots of imports, it's inefficient. Having a simple global @import-once; directive would make this much simpler.

[nex3]

This is something we'll consider for the upcoming re-envisioning of the @import functionality.

[chriseppstein]

Duplicate of #139

[chriseppstein]

BTW, that @if stuff is pretty clever :) It's pretty much how C solves this problem.

[seanofw]

Yah, I've done a lot of C coding, give or take a million lines. :-)

For the record, I think it's more meaningful to have the once-ness determined by the importee rather than the importer --- by the file that's being imported rather than by the file that's importing it. @import-once is a safe construct; no matter who imports that file, they can't screw it up, because it's impossible to import that file more than once; the caller can't make a mistake. But the suggestion in the other thread (which I missed when I searched for this topic), where you might add @require --- that suggestion allows the caller to decide whether the file gets imported once or many times, which is dangerous: If any one caller forgets and uses @import instead of @require, the imported code may end up imported more than once because of it. I've been bit by that in other languages, and I'd rather not see the same problem repeated in Sass.

[davidrivers]

+1 for native support. I just had a specificity-override scenario where I had to implement the import-once @function above to work around it :(

[JawsomeJason]

+1 for native support. I'd like to use the above workaround for magic sprites, but the "@include" portion cannot live inside an @if.

[chriseppstein]

Now available as a plugin: https://github.com/chriseppstein/compass/blob/master/import-once/README.md

[jlong]

@chriseppstein Did this get merged into 3.3 or is it still just a plugin?

[cseeger]

@jlong, it looks like this will be part of the 4.0 release.

[emilypriddy]

That will be a great addition!