Module()

• Overview
• Parameters
• Nested Modules

This mixin is part of Cell Query

Overview

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

@includemodule($modules, $content);

Unlock more power of modules by making them configurable

Example

<divclass="header">...</div>

@includemodule('header') {
... }

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')), '')

@includemodule('header') {
...
}

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

$config: (
'name' : 'header'
);
@includemodule {
... }

Style Multiple Modules Simultaneously

$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:

@includemodules(('header', 'footer')) {
...
}

$content

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

Instead of passing content via the module's @content directive, you can optionally/additionally pass content via the $content parameter:

Content passed via the $content parameter will override content passed via the @content directive

@includemodule('header', (
'display': block,
...
));

The map you pass to $content will be parsed as Cell Query

With Regular Content

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

With Components/Modifiers

...as documented by the Cell Query page

@includemodule('accordion', (
'panel': (
'is-active': (
'content': (
display: block,
...
)
)
),
'title': (
...
),
'content': (
display: none,
...
)
));

Nested Modules

It is possible to nest modules within one another:

@includemodule('header') {
@includemodule('button') {
...
}
}

CSS Output

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

Note that the same thing could be achieved from within the button module using the Context mixin:

@includemodule('button') {
@includecontext('header') {
...
}
}