Skip to main content

+_ separator

Mixin separator has no other function than visual perception where the start and the end of the css code of every element is and it proved to be a very useful (mandatory) mixin.

Each +element and +pseudo-element mixin must be preceded by a separator. It's a mixin of underscores (as many as you want) and the parser will yell at you with warning if you forget it (in strict mode).

It's mandatory and the parser will raise a warning if it is forgotten.

It can be ommited when +mode('draft') is used, but it's for fast writing a.k.a prototyping. See the +mode mixin.

+______ // this works
+______________ // this is ok
+________________________ // this is fine too
+____________________________________ // the length is up to you

Usage​

It must be used before every +element and +pseudo-element.

But do not use it in register section (see below).

+component('button')
  +register
    +element('.icon')
      +pseudo-element('after')
    +element('.text')
  
  display: block
  
  +____________________________
  +element('.icon')
    vertical-align: middle

    +____________________________
    +pseudo-element('after')
      width: 100%
    
  +____________________________
  +element('.text')
    font-size: 1.2em

Why it's useful and why it's worth it you can read in section Single place of element below.

But as you can see below it helps to fast scan the code and to orient in component sub-elements:

+mode('draft')

+component('button.btn')
  display: inline-block
  color: #3432A1
  line-height: 1.5em
  
  +_________________________
  +element('.icon')
    +default
      display: inline-block
      color: #3432A1

    +state(':hover')
      vertical-align: middle
      margin: 0.2em

    +state('.pressed')
      width: 100%
      height: auto
    
    +variant('.primary')
      +default
        font-size: 1.2em
        display: inline-block

      +state(':hover')
        vertical-align: middle
        margin: 0.2em

    +_________________________
    +element('img')
      +default
        width: 100%
        height: auto
      
      +variant('.primary')
        font-size: 1.2em
        display: inline-block
  
  +_________________________
  +element('.text')
    +default
      display: inline-block
      color: #3432A1
      line-height: 1.5em
    
    +state(':hover')
      vertical-align: middle
      margin: 0.2em

    +state('.pressed')
      width: 100%
      height: auto
    
    +variant('.primary')
      font-size: 1.2em
      display: inline-block
+mode('draft')

+component('button.btn')
  display: inline-block
  color: #3432A1
  line-height: 1.5em
  
  +_________________________
  +element('.icon')
    +default
      display: inline-block
      color: #3432A1

    +state(':hover')
      vertical-align: middle
      margin: 0.2em

    +state('.pressed')
      width: 100%
      height: auto
    
    +variant('.primary')
      +default
        font-size: 1.2em
        display: inline-block

      +state(':hover')
        vertical-align: middle
        margin: 0.2em

    +_________________________
    +element('img')
      +default
        width: 100%
        height: auto
      
      +variant('.primary')
        font-size: 1.2em
        display: inline-block
 
  +_________________________
  +element('.text')
    +default
      display: inline-block
      color: #3432A1
      line-height: 1.5em
    
    +state(':hover')
      vertical-align: middle
      margin: 0.2em

    +state('.pressed')
      width: 100%
      height: auto
    
    +variant('.primary')
      font-size: 1.2em
      display: inline-block
+mode('draft')

+component('button.btn')
  display: inline-block
  color: #3432A1
  line-height: 1.5em
  
  +_________________________
  +element('.icon')
    +default
      display: inline-block
      color: #3432A1

    +state(':hover')
      vertical-align: middle
      margin: 0.2em

    +state('.pressed')
      width: 100%
      height: auto
    
    +variant('.primary')
      +default
        font-size: 1.2em
        display: inline-block

      +state(':hover')
        vertical-align: middle
        margin: 0.2em

    +_________________________
    +element('img')
      +default
        width: 100%
        height: auto
      
      +variant('.primary')
        font-size: 1.2em
        display: inline-block
 
  +_________________________
  +element('.text')
    +default
      display: inline-block
      color: #3432A1
      line-height: 1.5em
    
    +state(':hover')
      vertical-align: middle
      margin: 0.2em

    +state('.pressed')
      width: 100%
      height: auto
    
    +variant('.primary')
      font-size: 1.2em
      display: inline-block

The above example shows one very important thing - if you take any highlighted element block there is no other CSS code addressing that element outside of this single contiguous block.

How it looks like without separators​

Here you can compare how to understand the code without separators and with separators. But you also need to feel that you are looking for specific element blocks and that it is important to notice where they start and where they end.

+component('.btn')   +register      +state(':hover')      +variant('.primary')      +context('.modal')      +responsive('{<md}')      +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      +context('.modal')      display: block      +responsive('{<md}')      padding: 0.25em 1em      +variant('.primary')      +default         background: $col-btn-bg-prim            +state(':hover')         background: $col-btn-bg-hover-prim         +element('.icon')       +default         display: inline-block         width: 1.5em         height: 1.5em         opacity: 0.75          +state(':hover')         transform: scale(1.15)            +variant('.primary')         opacity: 1         +context('.modal')         opacity: 0.85         +pseudo-element('before')         +default            content: '\0192'            display: inline-block            font-family: icons            opacity: 0.8            +state(':hover')            opacity: 1            +variant('.primary')            text-shadow: 0 0 0.5em black            +responsive('{<md}')            transform: scale(1.25)      +element('.text')      +default         white-space: nowrap         vertical-align: middle         +variant('.primary')         font-weight: bold             +responsive('{<md}')         white-space: normal

But if you still don't like the idea​

If you still don't like this idea and you find the mixin separator unnecessary to write, but you really like the SPOT CSS framework and you want to use it, there is one more option (although we think you are not making it right).

Before every individual component (for prototyping purposes):

+mode('draft')

or turn off this check globaly:

+spot-set('force-element-separator', false)

or

+spot-config(('force-element-separator': false))

More info: +mode, +spot-set, +spot-config