Search code examples
sassbourbon

What is this plus sign and shorthand used in this SASS?


This was written a couple of years ago and little has been done with it since. I've been trying to find documentation for this notation and haven't found anything.

header
  +display(flex)
  +flex-flow(row-reverse wrap)
  +justify-content(flex-start)
  +align-items(center)
  +align-content(flex-start)
  width: 100%

I thought it was shorthand from Bourbon but there isn't any documentation about it. Is it from a previous version of Bourbon?


Solution

  • It seems old Bourbon flexbox mixins written with SASS syntax using + to @include a mixin.

    Something like this:

    @mixin bg-color
      background-color: #ff0000
    
    h1
      +bg-color
    

    In your case, the developer may have written something similar:

    @import bourbon/bourbon
    
    header
      +display(flex)
      +flex-flow(row-reverse wrap)
      +justify-content(flex-start)
      +align-items(center)
      +align-content(flex-start)
      width: 100%
    

    These are the old Bourbon flexbox mixins: https://www.bourbon.io/docs/4/#flexbox