Component()

• Overview
• Parameters
• Sub-Components
• Add Modifiers
• Style All Components

This mixin is part of Cell Query

Overview

• Must be used within a Module mixin

@include component($components, $content, $sub-component, $glue);

Example

<div class="header__wrapper">...</div>

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

  @include component('wrapper') {
    ...    
  }
}

Parameters

• $components
• $content
• $sub-component
• $glue

$components

Type	String | List
Description	[optional] the name of your component(s)
Default	null

Style Multiple Components Simultaneously

$components 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 component. For such instances, an alias mixin of components() is available:

@include module('footer') {
  ...
  
  @include components(('nav', 'copyright')) {
    ...    
  } 
}

<div class="footer">
  <div class="footer__nav">...</div>
  <div class="footer__copyright">...</div>
</div>

CSS Output

.footer, [class*='footer-'] {
  ...
}
.footer__nav, [class*='footer__nav--'],
.footer__copyright, [class*='footer__copyright--'] {
  ...
}

$content

Type	Map
Description	[optional] pass a CQ map from which to generate CSS for the component(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 component($modules: 'foo', $content: (
  'color': red,
  'border-radius': 4px
));

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

Shorthand

@include component('foo', (
  'color': red,
  'border-radius': 4px
));

Which is equivalent to:

@include component('foo') {
  color: red;
  border-radius: 4px;
}

$sub-component

Type	Boolean
Description	Used for creating sub-components
Default	false

$glue

Type	String
Description	The glue to chain components to modules
Default	_

If you want to use a different string to chain components to modules, you can pass the $glue parameter when including the module:

@include module('header') {
  @include component('wrapper', $glue: '_') {
    ...    
  }    
}

CSS Output

.header_wrapper, [class*='header_wrapper-'] {
  ...
}

To globally change the component glue see the Global Variables page

Sub-Components

Normally when you nest a component within another component, the nested component will be treated as a component of the parent module. Sometimes you may wish the component to be a sub-component of the parent component instead. The component mixin accepts a $sub-component argument for such cases.

@include module('header') {
  @include component('user') {
    @include component('profile', $sub-component: true) {
      ...
    }
  }
}

Using Alias sub-component Mixin

@include module('header') {
  @include component('user') {
    @include sub-component('profile') {
      ...
    }
  }
}

CSS Output

.header__user__profile, [class*='header__user__profile-'] {
  ...
}

The below example demonstrates the differences between nesting the component and the sub-component mixins:

@include module('foo') {
  @include component('bar') {
    @include sub-component('fizz') {
      content: '1';
    }
    @include modifier('alpha') {
      @include sub-component('fizz') {
        content: '2';
      }
      @include component('buzz') {
        content: '3';
      }
    }
  }
}

Output

.foo__bar__fizz, 
[class*="foo__bar__fizz--"] {
  content: '1';
}

[class*="foo__bar--"][class*="--alpha"] .foo__bar__fizz, 
[class*="foo__bar--"][class*="--alpha"] [class*="foo__bar__fizz--"] {
  content: '2';
}

[class*="foo__bar--"][class*="--alpha"] .foo__buzz, 
[class*="foo__bar--"][class*="--alpha"] [class*="foo__buzz--"] {
  content: '3';
}

Add Modifiers

Components work like regular modules, in the sense that you can add modifiers:

@include module('header') {
  ...
  
  @include component('wrapper') {
    ...

    @include modifier('fullscreen') {
      ...
    }
  }
}

<div class="header__wrapper--fullscreen">...</div>

CSS Output

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

Using Alternative is() Mixin

@include module('header') {
  ...
  
  @include component('wrapper') {
    ...

    @include is('fullscreen') {
      ...
    }
  }
}

Style All Components

By not passing a parameter to the component() mixin, you can apply styles to all components of the parent module:

@include module('widget') {
  @include component {
    @include modifier('inline') {
      display: inline;
    }
  }
  
  @include component('icon') {
    color: red;
  }
  
  @include component('header') {
    color: blue;
  }
}

<div class="widget">
  <div class="widget__icon">...</div>
  <div class="widget__header">...</div>
</div>

<div class="widget">
  <div class="widget__icon--inline">...</div>
  <div class="widget__header--inline">...</div>
</div>

CSS Output

[class*='widget__'][class*='--inline'] {
  display: inline;
}
.widget__icon, [class*='widget__icon--'] {
  color: red;
}
.widget__header, [class*='widget__header--'] {
  color: blue;
}