SCSS naming convention

Question

Hi amazing stack overflow people.

I'm trying to make a re-usable style base for my projects in SCSS.

The idea is pretty much Boostrap but without the Boostrap.

So in a HTML element I would add a style class, something to define how the elements flex/grid/ect should be used like this:

<div class="flex-r-between">

This is where:

flex = display: flex;
r = flex-direction: row;
between = justify-content: space-between; 

So in my SCSS I have wrote a rule like this:

.flex{
  display: flex;
  &-{
    &r-{
      display: row;
      &even{
        justify-content: space-evenly;
      }
      &between{
        justify-content: space-between;
      }
    }
  }
}

BUT (here is the issue) :

this convention does not apply each of the styles like a check, it just adds the LAST valid css rule - in this case:

justify-content: space-between;

Now I totally get that there is probably a very good reason for this...

I am wondering if there is another way to write this SCSS so that at each of the points that the CSS is met i.e.

class="flex" << display flex is added 
class="flex-r" << display flex + flex-direction row is added 
ect ect

A final note (yes sorry I know this getting long as it is):

I'm trying to avoid spacing these styles out so they can be more concise.

i.e.

Is this possible or is the above the only way to approach this