Module()

View Real Example | View SassDocs

• Overview
• Parameters
• Nested Modules

Overview

Learn more about modules

The module() mixin is what generates the selectors for your module.

@include module($modules) {
  ...
};

Unlock more power of modules by making them configurable

Learn how to add modifiers to a module

Parameters

• $modules
• $content

$modules

Type	string | list
Description	[optional] the name of your module(s)
Default	if(variable-exists('config'), (map-get($config, 'name')), '')

@include module('header') {
  ...
}

If $modules is not defined, it will look for a name value in your module's config. This is an alternative way of using the module() mixin:

@mixin header($custom: ()) {
  $header: config((
    'name' : 'header'
  ), $custom);
  
  @include module {
    ...   
  }
}

$modules is usually a single value (a string) but can also be a list, eg. ('header', 'footer'), should you wish to apply styles to more than one module. For such instances, an alias mixin of modules() is available:

@include modules(('header', 'footer')) {
  ...
}

$content

Type	map
Description	[optional] pass a configuration map from which to generate CSS for the module
Default	()

@include module('header', (
  'display': block,
  ...
));

With Regular Content

The module mixin can still accept a content directive when passing the content parameter, which will take precedence:

@include module('header', (
  'display': block,
  ...
)) {
  // this will take precedence
  display: flex;
  ...
}

With Components/Modifiers

...as documented by the Module Configuration page

@include module('accordion', (
  'panel': (
    'is-active': (
      'content': (
        display: block,
        ...
      )
    )
  ),

  'title': (
    ...
  ),

  'content': (
    display: none,
    ...
  )
));

Nested Modules

It is possible to nest modules within one another:

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

CSS Output

.header .button, .header [class*='button--'],
[class*='header--'] .button, [class*='header--'] [class*='button--'] {
  ...
}