-
Notifications
You must be signed in to change notification settings - Fork 1
Module()
This mixin is part of Cell Query
The module()
mixin is what generates the selectors for your module.
@include module($modules, $content);
Unlock more power of modules by making them configurable
<div class="header">...</div>
@include module('header') {
...
}
Learn how to add modifiers to a module
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 the module's config. This is an alternative way of using the module()
mixin:
$config: (
'name' : 'header'
);
@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')) {
...
}
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
@include module('header', (
'display': block,
...
));
The map you pass to
$content
will be parsed as Cell Query
@include module('header', (
// this will take precedence
'display': flex,
...
)) {
display: block;
...
}
...as documented by the Cell Query page
@include module('accordion', (
'panel': (
'is-active': (
'content': (
display: block,
...
)
)
),
'title': (
...
),
'content': (
display: none,
...
)
));
It is possible to nest modules within one another:
@include module('header') {
@include module('button') {
...
}
}
.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:
@include module('button') {
@include context('header') {
...
}
}