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, $type) {
    ...
};

Unlock more power of modules by making them configurable

Learn how to add modifiers to a module

Parameters

• $modules
• $type

$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 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')) {
    ...
}

$type

Type	('flex'|'chain'|'static')
Description	[optional] this defines how the mixin generates the selectors for your component(s)
Default	flex

• Flex
• Chain
• Static
• Change Globally

Flex

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

This is the default value for a module; it creates selectors for both .module and [class*="module-"], allowing you to use both the naked module as well as modifiers. Whilst this is the most flexible option, it does mean the generated CSS is slightly greater, which is what the other 2 options are for.

CSS Output

.header, [class*="header-"] {
    ...
}

If using the global default $type value of flex, you do not need to pass a second parmeter here to achieve the flex option

Chain

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

CSS Output

[class*="header-"] {
    ...
}

The chain option should be used if you are looking to optimise your CSS output, and you know your module will not exist as a naked selector without modifiers. Ie - this option outputs only [class*="module-"], thefore you cannot use .module to achieve any styles.

Static

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

CSS Output

.header {
    ...
}

The static option creates only the naked selector for your module; ie - .selector, meaning no modifiers or components can be used.

Change Globally

To globally change the default type from flex to something else, pass your specified value to the $selector-type variable before including your modules.

// Re-define default selector type
$selector-type: 'chain';

// Import Synergy
@import 'path/to/synergy'

// Modules
...

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-'] {
    ...
}