Extend()

This feature will not work in Sass 4+ because extending compound selectors is no longer allowed. Please voice your concerns here: https://github.com/sass/sass/issues/1599

View Real Example | View SassDocs

• Overview
• Parameters
• Cross-Module Support

Overview

This mixin allows you to extend multiple modifiers into a new, seperate modifer, essentially combining several modifiers into one.

• Must be used within a Module mixin

@include extend($modifiers, $parent, $core);

Example

@include module('button') {
    ...

    @include modifier('round')   { border-radius: 6px }
    @include modifier('large')   { font-size: 2em }
    @include modifier('success') { color: green }

    @include modifier('primary') {
        @include extend(('round', 'large', 'success'))
    }    
}

<div class="button-primary">...</div>

Output

.button, [class*="button-"] {
    ...
}
[class*="button-"][class*="-round"], 
[class*="button-"][class*="-primary"] {
    border-radius: 6px;
}
[class*="button-"][class*="-large"], 
[class*="button-"][class*="-primary"] {
    font-size: 2em;
}
[class*="button-"][class*="-success"], 
[class*="button-"][class*="-primary"] {
    color: green;
}

Parameters

• $modifiers
• $parent
• $core

$modifiers

Type	string | list
Description	The modifier(s) which you wish to combine
Default	null

$parent

See the Cross-Module Support section for more information about this parameter's use-case

Type	string
Description	[optional] The target parent module if not the current one
Default	null

$core

See the Cross-Module Support section for more information about this parameter's use-case

Type	boolean
Description	[optional] Extend the core .module styles as well?
Default	false

Cross-Module Support

It is possible to extend the modifiers of one module into another module, as well as to extend an entire module into another module.

@include module('list') {
    ...

    @include modifier('reset') {
        list-style: none;
        margin-left: 0;
    }   
}

@include module('tabs') {
    ...

    @include component('nav') {
        @include extend($parent: 'list', $modifiers: 'reset');
    }
}

Output

.list, [class*='list-'] {
    ...
}

[class*='list-'][class*='-reset'],
.tabs_nav, [class*='tabs_nav-'] {
    list-style: none;
    margin-left: 0;
}

.tabs, [class*='tabs-'] {
    ...
}

This only extends the list's modifier, in order to extend the core styles as well, the $core paramater should be passed as true:

@include module('tabs') {
    @include component('nav') {
        @include extend($parent: 'list', $modifiers: 'reset', $core: true);
    }
}

Output

.list, .tabs_nav,
[class*='tabs_nav-'], [class*='list-'] {
    ...
}

[class*='list-'][class*='-reset'],
.tabs_nav, [class*='tabs_nav-'] {
    list-style: none;
    margin-left: 0;
}

.tabs, [class*='tabs-'] {
    ...
}

_module Alias

For usages like the above, an alias mixin of _module() is available. This is to provide a more semantic way of achieving the above task, allowing you to pass the $parents parameter, which is normally the second parameter, as the first, and also has a default $core value of true:

@include module('tabs') {
    @include component('nav') {
        @include _module('list', 'reset');
    }
}

Pass Multiple Modifiers

@include module('button') {
    @include modifier('round') {
        border-radius: 4px;
    }
    @include modifier('danger') {
        background: red;
    }
}

@include module('modal') {
    @include component('action') {
        @include modifier('close') {
            @include _module('button', ('round', 'danger'));
        }
    }
}

Output

[class*="button-"][class*="-round"], 
[class*="modal_action-"][class*="-close"] {
  border-radius: 4px;
}

[class*="button-"][class*="-danger"], 
[class*="modal_action-"][class*="-close"] {
  background: red;
}

View Real Example