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

Question

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?

Answer 1

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