Value()

• Overview
• Parameters
• Detailed Example

Overview

Conditionally apply styles to a module if the specified option in the module's configuration is a certain value

• Must be used within an Option mixin

@include value($value);

Parameters

• $value

$value

Type	*
Description	The value on which to test to apply conditional styles
Default	undefined

Example

You may have a set of styles you wish to use conditionally, and you may wish for these styles to vary depending on the value passed to the option. Let's look at the following example - imagine your project has a side header, and you want to easily change whether it appears on the left or right hand side:

$config: (
  'side' : false // 'left' or 'right'
);
  
@include module('header') {
  @include option('side') {
    position: absolute;
    height: 100%;
    width: 400px;

    @include value('left') {
      left: 0;
      right: auto;
    }

    @include value('right') {
      right: 0;
      left: auto;
    }
  }
}

CSS Output (with side as false)

[class*="header--"][class*="--side"] {
  position: absolute;
  height: 100%;
  width: 400px;
}

[class*="header--"][class*="--side"][class*="--side"][class*="--left"] {
  left: 0;
  right: auto;
}

[class*="header--"][class*="--side"][class*="--side"][class*="--right"] {
  right: 0;
  left: auto;
}

CSS Output (with side as left)

.header, [class*="header--"] {
  position: absolute;
  height: 100%;
  width: 400px;
  left: 0;
  right: auto;
}

[class*="header--"][class*="--side"][class*="--right"] {
  right: 0;
  left: auto;
}

Value Modifiers

By default these options are extended as modifiers so you can use them regardless of the setting's value:

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

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

Because of how modifiers work, the order does not matter:

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

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

For clarity, with the side option set to either left or right in the above example, you don't need to pass any modifiers to the HTML:

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