Modifier()

• Overview
• Parameters
• Nested Modifiers

This mixin is part of Cell Query

Overview

Learn more about modifiers

• Must be used within a Module or Component mixin

@include modifier($modifiers, $special, $glue);

Alias

@include is($args...);

Example

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

  @include modifier('small') {
    font-size: 0.75em;
  }

  // or using the alias `is`:
  @include is('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>

Note how when usng cell your markup doesn't need to be polluted with separate classes for each modifier, unlike traditional BEM which would require youre markup to be:

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

However, the above markup (traditional BEM) would still be compatible with Cell out-the-box.

Parameters

• $modifiers
• $special
• $glue

$modifiers

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

Multple Modifiers

$modifiers is usually a single value (a string) 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

$special == 'not'

When $special is set to not, the styles will be applied when the module/component is not the specified modifier(s).

$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 see the Global Variables page

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