Option()

• Overview
• Parameters
• Nested Values
• Option Modifiers

Overview

Conditionally apply styles to a module if a defined option within the module's configuration is true

• Must be used within a configurable module

@include option($option-path...);

Example

$config: (
  'dark' : false,
  'top'  : 50px
);

@include module('header') {
  @include option('dark') {
    // styles will be applied if 'dark' is set to 'true'
    // or if the 'dark' modifier is applied to the module
    ...   
  }

  // this is equivalent to:
  @if map-get($config, 'dark') {
    ...
  }
}

You can alternatively pass the bool value to your option like so:

$config: (
  'dark':(
    'enabled': true,
    'color': #262626
  ),
  'top': 50px
);

@include module('header') {
  @include option('dark') {
    // styles will be applied if dark.enabled is set to 'true'
    // or if the 'dark' modifier is applied to the module
    background: this('dark', 'color');
  }
}

Note that the values for the option when passed this way will be parsed as CQ, so the above output could also be achieved with:

$config: (
  'dark':(
    'enabled': true,
    'background': #262626
  ),
  'top': 50px
);

@include module('header') {
  @include option('dark');
}

Parameters

• $option-path...

$option-path...

Type	Arglist
Description	The nested path to your desired option
Default	undefined

Nested Values

It's possible to use the option mixin on nested configuration values:

$config: (
  'foo' : (
    'bar': (
      'qux': true
    )
  )
);

@include module('header') {
  // styles will be applied if foo.bar.qux is set to 'true'
  @include option('foo', 'bar', 'qux') {
    ...   
  }
}

Option Modifiers

By default, using the option mixin will also create a modifier for the setting (but only if the value is false); so you can apply the styles by adding the modifier to your HTML tag, regardless of the setting's value:

<div class="header--dark">
  ...
</div>

N.B - if you are retrieving a nested value from the configuration, the modifier key will be the last key in the tree:

If you are watching your CSS output, you may wish to remove these modifiers (and related selectors) from the generated styles and only use them conditionally. To do so, you can pass the extendOptions option to your module's config, and set it to false:

$config: (
  'extendOptions': false,
  'dark' : false,
  'top'  : 50px
);

...

To globally change this value, see the Global Variables page