Skip to main content

What are mutations

When one entity has more appearances, we call it a "mutation" (not variant, that's just a type of mutation).

If element has only one appearance, we call it element without mutations. If element has more appearances, it has default appearance and other mutations.

There are these types of mutations:

  • +default - when element has more mutations, the "default" mutation must be declared and should go first.

  • +variant - the basic type of the mutation. It defines other than default appearance of the component.

  • +state - exactly the same as mixin +variant. The only difference is in semantics.

  • +context - the context is prepended before the component selector.

  • +responsive - works similar to mixin +context. The main difference is in semantics and that you can use media and container queries.

And exception:

  • +spot-exception-variant - If something violates the principles of SPOT CSS and you want to draw attention to it semantically. But it works exactly the same as mixin +variant.

Where should be used​

Mutation mixins should only be used in element blocks and on the other side +element and +pseudo-element mixins cannot be used inside them.

Where should be mutations used​

+component('button')
  +register
    +element('.icon')
      +pseudo-element('before')
    +element('.text')

  // ...
  // ... block of the root element ...
  // ...

  +__________________________
  +element('.icon')
    // ...
    // ... block of the icon element ...
    // ...
    
    +__________________________
    +pseudo-element('before')
      // ...
      // ... block of the pseudo-element ...
      // ...
  
  +__________________________
  +element('.text')
    // ...
    // ... block of the text element ...
    // ...

What should NOT be used inside them​

+component('button')
  +register
    +element('.icon')
      +pseudo-element('before')
    +element('.text')

  +default
    display: inline-block
    padding: 0.5em 1.5em
    background: $col-btn-bg
    line-height: 1.5
  
  +state(':hover')
    background: $col-btn-bg-hover

    +__________________________
    +element('.icon')
      transform: scale(1.15)

  +variant('.primary')
    +default
      background: $col-btn-bg-prim
    
    +state(':hover')
      background: $col-btn-bg-hover-prim

    +element('.text')
      font-weight: bold  
  ...

There is a very important but simple rule: every element has all it's CSS code in one contiguous block and nowhere else.