Modifier()

View Real Example | View SassDocs

• Overview
• Parameters
• Nested Modifiers

Overview

Learn more about modifiers

• Must be used within a Module or Component mixin

@include modifier($modifiers, $special, $glue) {
    ...    
}

Example

@include module('button') {
    
    ...
    
    @include modifier('small') {
        font-size: 0.75em;
    }
    
    @include modifier('large') {
        font-size: 1.5em;
    }
    
}

<div class="button">Button</div>
<div class="button-small">Button</div>
<div class="button-large">Button</div>

CSS Output

.button, [class*="button-"] {
    ...
}
[class*="button-"][class*="-small"] {
    font-size: 0.75em;
}
[class*="button-"][class*="-large"] {
    font-size: 1.5em;
}

You can use any number of modifiers on a single element in the HTML, and in any order, for example:

<div class="button-large-round-primary">...</div>
<div class="button-primary-large-round">...</div>

Parameters

• $modifiers
• $special
• $glue

$modifiers

Type	string | list
Description	[required] the name of the desired modifier(s)
Default	undefined

$modifiers is usually a single value but can also be a list, eg. ('small', 'large'), should you wish to apply styles to more than one modifier. For such instances, an alias mixin of modifiers() is available:

@include module('button') {
    
    ...
    
    @include modifiers(('buy-now', 'add-to-basket')) {
        text-transform: uppercase;
    }
    
    @include modifier('buy-now') {
        ...
    }
    
    @include modifier('add-to-basket') {
        ...
    }
    
}

CSS Output

.button, [class*="button-"] {
    ...
}
[class*="button-"][class*="-buy-now"], 
[class*="button-"][class*="-add-to-basket"] {
    text-transform: uppercase;
}
[class*="button-"][class*="-buy-now"] {
    ...
}
[class*="button-"][class*="-add-to-basket"] {
    ...
}

$special

Type	string
Description	Set a special operator
Default	null

$glue

Type	string
Description	The glue to chain modifiers to modules and components
Default	-

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

@include module('button') {
    @include modifier('large', $glue: '--') {
        ...    
    }    
}

CSS Output

[class*="button--"][class*="--large"] {
    ...
}

To globally change the modifier glue, pass the $modifier-glue variable before including your modules.

// Set custom modifier glue
$modifier-glue: '--';

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

// Modules
...

Nested Modifiers

The modifier() mixin is infinitely nestable allowing you to require more than one modifier for styles to take effect:

@include module('header') {
    
    ...
    
    @include modifier('side') {
        position: absolute;
        @include modifier('left') {
            left: 0;
        }
        @include modifier('right') {
            right: 0;
        }
    }
    
}

<div class="header-side-left">...</div>

CSS Output

.header, [class*="header-"] {
    ...
}
[class*="header-"][class*="-side"] {
    position: absolute;
}
[class*="header-"][class*="-side"][class*="-left"] {
    left: 0;
}
[class*="header-"][class*="-side"][class*="-right"] {
    right: 0;
}