Skip to content

Module()

esr360 edited this page Jan 17, 2020 · 10 revisions

This mixin is part of Cell Query

Overview

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

@include module($modules, $content);

Unlock more power of modules by making them configurable

Example
<div class="header">...</div>
@include module('header') {
  ... 
}

Learn how to add modifiers to a module

Parameters

$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 the module's config. This is an alternative way of using the module() mixin:

$config: (
  'name' : 'header'
);

@include module {
  ...   
}

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:

@include modules(('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

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

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

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

...as documented by the Cell Query 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--'] {
  ...
}

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

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