sass / scss - create class shortcuts - sass

Question

While doing some css I came up with the idea of combining multiple classes into one. The reason is, to use short class names which could probably already be in use.
Assume the following:
.f-box-cell {
flex : 1 1 auto;
// colors
&.red { background-color: red; }
&.green { background-color: green; }
...
// sizes
&.b25 { flex-basis: 25%; }
&.b50 { flex-basis: 50%; }
...
// other options
...
}
Instead of doing ...
<div class="f-box-cell">
<div class="f-box-cell red">
<div class="f-box-cell b25">
<div class="f-box-cell red b25">
... I want do have something like ...
<div class="f-box-cell">
<div class="f-box-cell-red">
<div class="f-box-cell-b25">
<div class="f-box-cell-red-b25">
... with the same effect as the normal class listings.
Obviously, the more "subclasses" are added the more combinations would exist. So I'm interessted - if possible - in creating all these combinations automatically. Completely awesome would be, if the position of the "classes" inside the "combined class" would not matter.
Therefore my 2 main questions are:
Is there a way to achieve something like this with sass / scss?
Is the idea completely stupid?
Thanks in advance

Answer 1

If you only want to have all your classes prefixed and don't mind adding two classes (class="f-box-cell f-box-cell-red"), then you can just use the ampersand multiple times:
.f-box-cell {
flex : 1 1 auto;
// colors
& &-red { background-color: red; }
& &-green { background-color: green; }
...
// sizes
& &-b25 { flex-basis: 25%; }
& &-b50 { flex-basis: 50%; }
...
// other options
...
}
If you only want to use the most specific class, which should inherit from the base one, you can use the #extend rule:
.f-box-cell {
flex : 1 1 auto;
// colors
&-red { #extend .f-box-cell; background-color: red; }
&-green { #extend .f-box-cell; background-color: green; }
...
// sizes
&-b25 { #extend .f-box-cell; flex-basis: 25%; }
&-b50 { #extend .f-box-cell; flex-basis: 50%; }
...
// other options
...
}
Which compiles to:
.f-box-cell,
.f-box-cell-b50,
.f-box-cell-b25,
.f-box-cell-green,
.f-box-cell-red {
flex: 1 1 auto;
}
.f-box-cell-red {
background-color: red;
}
.f-box-cell-green {
background-color: green;
}
.f-box-cell-b25 {
flex-basis: 25%;
}
.f-box-cell-b50 {
flex-basis: 50%;
}