Extend()

• 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 just the modifiers of one module into another module, as well as extend an entire module (including its core styles) 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