@mixin !default

Feature:

It would be nice to be able to use the !default modifier with mixins, much like with variable assignment… if a mixin of that name was already defined, the declaration would not replace the previous one.

For example:

@mixin foo()
{
       display: block;
}

@mixin foo() !default 
{
       display: inline;
}

.bar { @include foo; }

… would result in .bar { display: block; }

The main place I can think of that would be a great use-case is frameworks like Foundation. If all of Foundation’s mixins were defined with !default, then the application-specific settings.scss file could override not just variables, but mixins as well, making it a lot easier to customize the output of such frameworks. As it stands now, you can tweak the variables, but mixins are either “accept them as they are or don’t use them”.

[KittyGiraudel]

The only realistic option that is currently available is to check if the mixin exists before defining it:

As far as I know, it’s not even an option since mixins and functions cannot be defined in control directives.

Mixins may not be defined within control directives or other mixins. Functions may not be defined within control directives or other mixins.

Also, that would be not and not !.

Anyway, it would be cool to have the !default flag available for mixins and functions as well. 😃

[cimmanon]

I’ve been wanting a feature like this myself. I know there’s been some discussion about namespacing, but I don’t think it would solve this problem. If I like a particular library’s boilerplate except for minor things here and there that are controlled by mixins, being able to have defaultable mixins seems like the most straightforward solution.

@mixin base-block-styles {
    margin: 0;
    padding: 0;
}

p, div, ul, ol, etc {
    @include base-block-styles;
}

What happens if I want to use this mixin instead?

@mixin base-block-styles {
    margin: 1em 0;
}

If the file I was importing didn’t include a base-block-styles mixin (maybe it is defined elsewhere in the library), then the user would be forced to create the mixin themselves or do an extra import. I don’t feel this is good for the user.

The only realistic option that is currently available is to check if the mixin exists before defining it:

@if !mixin-exists(base-block-styles) {
    @mixin base-block-styles {
        margin: 0;
        padding: 0;
    }
}

This seems a lot less elegant than simply making use of a !default flag, which users are already familiar with.