Component()

View Real Example | View SassDocs

• Overview
• Parameters
• Nested Components
• Add Modifiers
• Global Component Styles

Overview

Learn more about components

• 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

$components is usually a single value 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] used for passing styles to your component(s)
Default	()

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

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

Shorthand

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

Which is equivalent to:

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

Doing this means the properties can be accessed and manipulated internally, for example to prevent duplicates:

// Properties will be duplicated in output
@include component('foo') {
    color: red;
    color: blue;
}

// Properties will not be duplicated in output
@include component('foo', (
    'color': red,
    'color': blue
));

$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, pass the $component-glue variable with before importing Synergy.

// Set custom component glue
$component-glue: '__';

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

// Modules
...

Nested Components

It is possible to nest components within one another. In such cases, the nested component is considered to be a sub-component:

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

Global Component Styles

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-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;
}