Atoms

A Cell Atom is a single CSS property that outputs two different values that will be applied to an element based on some passed context. In this case, context could mean things like the presence of certain modifiers/pseudo-states, or whether or not the element/some parent element is hovered etc. This is mostly useful when toggling properties based on some event or interaction.

Available Atoms

• Display
• Position
• Visibility

Example

See the context() mixin for more information

@include module('myElement') {
  color: blue;
  @include display(('someParent', 'active'), block, none);
}

Syntactic sugar for:

@include module('myElement') {
  color: blue;
  display: none;
  
  @include context('someParent', 'active') {
    display: block;
  }
}